AJax中post与get请求注意事项
在使用ajax提交表单时,一定要区分提交按钮的形式和数据表头的设置,实例如下:
GET请求:
HTML代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生ajax-状态值得含义</title>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById('btn');
btn.onclick = function() {
var username = document.getElementById("username").value;
var password = document.getElementById('password').value;
//第一步:创建xhr对象
var xhr = null;
if(window.XMLHttpRequest) { //标准浏览器
xhr = new XMLHttpRequest();
} else { //早期的IE浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} //第二步:准备发送请求-配置发送请求的一些行为
//var url = '05open.php?username=' + encodeURIComponet(username) + '&password=' + password; var url = '05open.php?username='+username+'&password='+password;
xhr.open('get', url,true);
//第三步:执行发送的动作 var param = 'username=' + username + '&password=' + password;
xhr.send(null);
//第四步:指定一些回调函数
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var data = xhr.responseText; //json
console.log(data);
// var data1 = xhr.responseXML;
}
}
}
}
}
</script>
</head> <body>
<div>
<div id="showInfo"></div>
<form>
用户名:<input type="text" name="username" id="username"><br> 密码:
<input type="password" name="password" id="password"><br>
<!--<input type="button" value="提交" id="btn">-->
<input type="submit" value="提交" id="btn">
</form>
</div>
</body>
</html>
php代码:
<?php $username = $_GET['username'];
$password = $_GET['password']; // $username = $_POST['username'];
// $password = $_POST['password'];
// echo 1; echo '用户名:'.$username.'密码:'.$password; ?>
提交按钮采用
<input type="submit" value="提交" id="btn">
提交后的结果是:
提交按钮采用
<input type="button" value="提交" id="btn">
提交后的结果是:
POST请求:
HTML代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生ajax-状态值得含义</title>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById('btn');
btn.onclick = function() {
var username = document.getElementById("username").value;
var password = document.getElementById('password').value;
//第一步:创建xhr对象
var xhr = null;
if(window.XMLHttpRequest) { //标准浏览器
xhr = new XMLHttpRequest();
} else { //早期的IE浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} //第二步:准备发送请求-配置发送请求的一些行为
//var url = '05open.php?username=' + encodeURIComponet(username) + '&password=' + password; //var url = '05open.php?username='+username+'&password='+password;
var url='05open.php';
xhr.open('post', url,true);
//第三步:执行发送的动作 var param = 'username=' + username + '&password=' + password;
xhr.send(param);
//第四步:指定一些回调函数
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var data = xhr.responseText; //json
console.log(data);
// var data1 = xhr.responseXML;
}
}
}
}
}
</script>
</head> <body>
<div>
<div id="showInfo"></div>
<form>
用户名:<input type="text" name="username" id="username"><br> 密码:
<input type="password" name="password" id="password"><br>
<input type="button" value="提交" id="btn">
</form>
</div>
</body>
</html>
php代码:
<?php //$username = $_GET['username'];
//$password = $_GET['password']; $username = $_POST['username'];
$password = $_POST['password']; echo '用户名:'.$username.'密码:'.$password; ?>
执行结果:
这是没有设置头文件的原因:
头文件设置如下:
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
设置后执行如下:
AJax中post与get请求注意事项的更多相关文章
- 原生ajax中get和post请求
后台代码: class AjaxHanlder(tornado.web.RequestHandler): def get(self): print(self.get_argument('type',N ...
- Django框架 之 基于Ajax中csrf跨站请求伪造
Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({ data: {csrfmiddlewaretoken: ...
- ajax中Post和Get请求方式的区别?
ajax中Post和Get请求方式的区别: 1.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示. 2.Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的 ...
- 【转】AJAX发送 PUT和DELETE请求注意事项
jax使用restful服务发送put 和 delete 请求时直接传参会出现问题 一,采用POST + _method:delete/put + filter 的方法ajax发送put 和 de ...
- ajax中的setRequestHeader设置请求头
1.问题引发点: 前不久发现一个问题: 前端并没有设置请求头信息里面的Accept-Encoding:gzip...但是在请求头中可以明显的看到Accept-Encoding:gzip, deflat ...
- 资料汇总--Ajax中Put和Delete请求传递参数无效的解决方法(Restful风格)【转】
开发环境:Tomcat9.0 在使用Ajax实现Restful的时候,有时候会出现无法Put.Delete请求参数无法传递到程序中的尴尬情况,此时我们可以有两种解决方案:1.使用地址重写的方法传递参数 ...
- Ajax中Put和Delete请求传递参数无效的解决方法(Restful风格)
本文装载自:http://blog.csdn.net/u012737182/article/details/52831008 感谢原文作者分享 开发环境:Tomcat9.0 在使用Ajax实现R ...
- jquery用Ajax中的回调函数时注意事项
前端代码 <script language="javascript" type="text/javascript" src="<?php ...
- ajax中加上AntiForgeryToken防止CSRF攻击
经常看到在项目中ajax post数据到服务器不加防伪标记,造成CSRF攻击 在Asp.net Mvc里加入防伪标记很简单在表单中加入Html.AntiForgeryToken()即可. Html.A ...
随机推荐
- HackerRank training-the-army
Description 有 \(n\) 个技能,每次可以通过一个巫师,将一个技能转化成另一个技能,问最有最多有多少不同的技能. Sol 网络流. 先说说我一开始非常 naive 的建图,将技能拆点,中 ...
- BZOJ 3907: 网格
Description 求不跨过直线 \(y=x\) ,到达 \((n,m)\) 的方案数. Sol 组合数学+高精度. 这个推导过程跟 \(Catalan\) 数是一样的. 答案就是 \(C^{n+ ...
- Android架构:用消息机制获取网络数据
网络请求,不管是什么协议,是长连接还是短连接,总是一个异步的请求,过程包括:加请求参数->发起请求->接收响应->解析数据->获得业务数据. 最挫的做法是,业务代码包揽所有这些 ...
- 28 GroupSock(NetAddress)——live555源码阅读(四)网络
28 GroupSock(NetAddress)——live555源码阅读(四)网络 28 GroupSock(NetAddress)——live555源码阅读(四)网络 简介 1) NetAddre ...
- xdebug调试php程序
相关设置 xdebug.default_enable=1 默认是1,当错误出现时,堆栈跟踪会激活.可以在代码中通过xdebug_disable()来关闭它. xdebug.force_display_ ...
- 【转】【编码】ANSI,ASCII,Unicode,UTF8之一
不同的国家和地区制定了不同的标准,由此产生了 GB2312.GBK.GB18030.Big5.Shift_JIS 等各自的编码标准.这些使用多个字节来代表一个字符的各种汉字延伸编码方式,称 ...
- C#之new修饰符
转自MSDN:https://msdn.microsoft.com/zh-cn/library/435f1dw2.aspx new隐藏基类成员 在用作修饰符时,new关键字可以显式的隐藏从基类继承的 ...
- linux内置的审计跟踪工具------last和lastb
last是linux的一个内置工具,可以用来查看最后登录服务器的用户.它对于追踪非常有用. last命令显示的是来自/var/log/wtmp文件创建起,所有登录的用户.这个文件是一个二进制文件,不能 ...
- ABAP 供应商、工厂对应公里数维护
*&---------------------------------------------------------------------* *& Report ZMMR011 ...
- [转载]Masonry介绍与使用实践(快速上手Autolayout)
原博地址 http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/ 前言 1 MagicNumber -> aut ...