在使用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. ubuntu15.10下编译安装wine1.8 rc4

    ubuntu15.10下编译安装wine1.8rc4 Wine (“Wine Is Not an Emulator” 的递归缩写)是一个能够在多种 POSIX-compliant 操作系统(诸如 Li ...

  2. 2016 Multi-university training contest

    day 1 A 给G,w(e)1M(diff),|V|100K,|E|1M,求 MST MST上任意两点间距离的期望 显然MST唯一 E(dis(u,v))可以通过计算每条边的贡献加出来 B n个并行 ...

  3. IDEA 编译找不到符号，文件却没有错误。

    单独编译提交找不到符号的文件. DIEAA

  4. 转：理解Cookie和Session机制

    原文: 理解Cookie和Session机制 摘要: Cookie工作原理 由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份.怎么办呢?就给客户端们颁发一个通行证吧,每人一个,无论 ...

  5. CentOS6.5安装Tab增强版:bash-completion

    CentOS6.5安装Tab增强版:bash-completion,可补全命令参数: 因为CentOS官方源并不带有bash-completion的包,所以,为了可用yum安装,增加epel的源, 首 ...

  6. Qt 子窗体嵌入父窗体

    1.创建个子窗体QDialog.在子窗体构造函数添加 Dialog::Dialog(QWidget *parent) : QDialog(parent), ui(new Ui::Dialog) { u ...

  7. 2. javacript高级程序设计-在HTML中使用JavaScript

    1.1 <script>元素 向HTML页面中插入JavaScript的主要方法,就是使用<script>元素,<script>元素定义了一下6个元素: (1). ...

  8. metro压缩和解压文件

    在1.zip中增加一张新图片StorageFile jpg = await KnownFolders.PicturesLibrary.GetFileAsync("1.jpg"); ...

  9. Python~第三方模块

    第三方库还有MySQL的驱动:MySQL-python,用于科学计算的NumPy库:numpy,用于生成文本的模板工具Jinja2 模块搜索路径 Windows下: 双\\   sys.path.ap ...

  10. 两种js数组去重的方法

    方法一: 新建一个数组,遍历原数组,在新数组内用IndexOf查找原数组内的每一项,如果没有找到,则添加到其中 代码如下: function arrayNew(arrs ){ var newArray ...