在使用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请求注意事项的更多相关文章

  1. 原生ajax中get和post请求

    后台代码: class AjaxHanlder(tornado.web.RequestHandler): def get(self): print(self.get_argument('type',N ...

  2. Django框架 之 基于Ajax中csrf跨站请求伪造

    Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({     data: {csrfmiddlewaretoken: ...

  3. ajax中Post和Get请求方式的区别?

    ajax中Post和Get请求方式的区别: 1.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示. 2.Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的 ...

  4. 【转】AJAX发送 PUT和DELETE请求注意事项

    jax使用restful服务发送put 和 delete 请求时直接传参会出现问题 一,采用POST  + _method:delete/put  + filter 的方法ajax发送put 和 de ...

  5. ajax中的setRequestHeader设置请求头

    1.问题引发点: 前不久发现一个问题: 前端并没有设置请求头信息里面的Accept-Encoding:gzip...但是在请求头中可以明显的看到Accept-Encoding:gzip, deflat ...

  6. 资料汇总--Ajax中Put和Delete请求传递参数无效的解决方法(Restful风格)【转】

    开发环境:Tomcat9.0 在使用Ajax实现Restful的时候,有时候会出现无法Put.Delete请求参数无法传递到程序中的尴尬情况,此时我们可以有两种解决方案:1.使用地址重写的方法传递参数 ...

  7. Ajax中Put和Delete请求传递参数无效的解决方法(Restful风格)

    本文装载自:http://blog.csdn.net/u012737182/article/details/52831008    感谢原文作者分享 开发环境:Tomcat9.0 在使用Ajax实现R ...

  8. jquery用Ajax中的回调函数时注意事项

    前端代码 <script language="javascript" type="text/javascript" src="<?php ...

  9. ajax中加上AntiForgeryToken防止CSRF攻击

    经常看到在项目中ajax post数据到服务器不加防伪标记,造成CSRF攻击 在Asp.net Mvc里加入防伪标记很简单在表单中加入Html.AntiForgeryToken()即可. Html.A ...

随机推荐

  1. 读书笔记-JVM

    局部变量表(虚拟机栈中的一部分)在编译期完成分配,运行期不会再改变大小: 每个方法对应一个栈帧(存储局部变量表.操作数栈.动态链接.方法出口等),栈帧被存储到虚拟机栈中,每个线程对应一个虚拟机栈,方法 ...

  2. python入门教程链接

    python安装 选择 2.7及以上版本 linux: 一般都自带 windows: https://www.python.org/downloads/windows/ mac os: https:/ ...

  3. django xadmin多个model的数据渲染在统一个template中

    adminx.py demo class ModelAdmin(object): #.... def get_context(self): context = super(SimCardService ...

  4. 在sublime-text中设置浏览器预览

    配置在Chrome,Firefox中打开 安装 SideBarEnhancements 然后通过ctrl + k, ctrl + b打开侧边栏,在侧边栏的文件中右击,找到 open width -&g ...

  5. AutoMapper Getting started

    AutoMapper 是什么? 为什么要用AutoMapper? 如何使用AutoMapper? 在什么地方配置AutoMapper? 如何测试my mappings? AutoMapper 是什么? ...

  6. gitlab 无法查看提交的文件Errno::ENOMEM (Cannot allocate memory - /opt/gitlab/embedded/bin/git):

    gitlab可以成功clone和push,但是提交后的文件却无法查看.从页面上看的话只显示出500错误. 查了下gitlab的日志 tail -f /var/log/gitlab/gitlab-rai ...

  7. FastReport调用Delphi中的人民币大写转换自定义函数

    FastReport调用Delphi中的人民币大写转换自定义函数   FastReport调用Delphi中的人民币大写转换自定义函数 function TJzpzEdit1.MoneyCn(mmje ...

  8. shell脚本监控MySQL服务是否正常

    监控MySQL服务是否正常,通常的思路为:检查3306端口是否启动,ps查看mysqld进程是否启动,命令行登录mysql执行语句返回结果,php或jsp程序检测(需要开发人员开发程序)等等: 方法1 ...

  9. Android笔记:四大组件

    1.Activity(是用户可以看到的主要的界面,使用时需要在AndroidManifest.xml中编辑声明.) 启动模式: 启动模式一共有四种,分别是standard.singleTop.sing ...

  10. 决绝Capturing 'demo' strongly in this block is likely to lead to a retain cycle

    - (IBAction)onTest:(id)sender { BlockDemo *demo = [[BlockDemo alloc]init];  __weak typeof(BlockDemo) ...