AJax中post与get请求注意事项
在使用ajax提交表单时，一定要区分提交按钮的形式和数据表头的设置，实例如下：
GET请求：
HTML代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>原生ajax-状态值得含义</title> 6 <script type="text/javascript"> 7 window.onload = function() { 8 var btn = document.getElementById('btn'); 9 btn.onclick = function() { 10 var username = document.getElementById("username").value; 11 var password = document.getElementById('password').value; 12 //第一步：创建xhr对象 13 var xhr = null; 14 if(window.XMLHttpRequest) { //标准浏览器 15 xhr = new XMLHttpRequest(); 16 } else { //早期的IE浏览器 17 xhr = new ActiveXObject('Microsoft.XMLHTTP'); 18 } 19 20 //第二步：准备发送请求-配置发送请求的一些行为 21 //var url = '05open.php?username=' + encodeURIComponet(username) + '&password=' + password; 22 23 var url = '05open.php?username='+username+'&password='+password; 24 xhr.open('get', url,true); 25 //第三步：执行发送的动作 26 27 var param = 'username=' + username + '&password=' + password; 28 xhr.send(null); 29 //第四步：指定一些回调函数 30 xhr.onreadystatechange = function() { 31 if(xhr.readyState == 4) { 32 if(xhr.status == 200) { 33 var data = xhr.responseText; //json 34 console.log(data); 35 // var data1 = xhr.responseXML; 36 } 37 } 38 } 39 } 40 } 41 </script> 42 </head> 43 44 <body> 45 <div> 46 <div id="showInfo"></div> 47 <form> 48 用户名：<input type="text" name="username" id="username"><br> 密码： 49 <input type="password" name="password" id="password"><br> 50 <!--<input type="button" value="提交" id="btn">--> 51 <input type="submit" value="提交" id="btn"> 52 </form> 53 </div> 54 </body> 55 </html>
php代码：
1 <?php 2 3 $username = $_GET['username']; 4 $password = $_GET['password']; 5 6 // $username = $_POST['username']; 7 // $password = $_POST['password']; 8 // echo 1; 9 10 echo '用户名：'.$username.'密码：'.$password; 11 12 ?>
提交按钮采用
<input type="submit" value="提交" id="btn">
提交后的结果是：
提交按钮采用
<input type="button" value="提交" id="btn">
提交后的结果是：
POST请求：
HTML代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>原生ajax-状态值得含义</title> 6 <script type="text/javascript"> 7 window.onload = function() { 8 var btn = document.getElementById('btn'); 9 btn.onclick = function() { 10 var username = document.getElementById("username").value; 11 var password = document.getElementById('password').value; 12 //第一步：创建xhr对象 13 var xhr = null; 14 if(window.XMLHttpRequest) { //标准浏览器 15 xhr = new XMLHttpRequest(); 16 } else { //早期的IE浏览器 17 xhr = new ActiveXObject('Microsoft.XMLHTTP'); 18 } 19 20 //第二步：准备发送请求-配置发送请求的一些行为 21 //var url = '05open.php?username=' + encodeURIComponet(username) + '&password=' + password; 22 23 //var url = '05open.php?username='+username+'&password='+password; 24 var url='05open.php'; 25 xhr.open('post', url,true); 26 //第三步：执行发送的动作 27 28 var param = 'username=' + username + '&password=' + password; 29 xhr.send(param); 30 //第四步：指定一些回调函数 31 xhr.onreadystatechange = function() { 32 if(xhr.readyState == 4) { 33 if(xhr.status == 200) { 34 var data = xhr.responseText; //json 35 console.log(data); 36 // var data1 = xhr.responseXML; 37 } 38 } 39 } 40 } 41 } 42 </script> 43 </head> 44 45 <body> 46 <div> 47 <div id="showInfo"></div> 48 <form> 49 用户名：<input type="text" name="username" id="username"><br> 密码： 50 <input type="password" name="password" id="password"><br> 51 <input type="button" value="提交" id="btn"> 52 </form> 53 </div> 54 </body> 55 </html>
php代码：
1 <?php 2 3 4 //$username = $_GET['username']; 5 //$password = $_GET['password']; 6 7 $username = $_POST['username']; 8 $password = $_POST['password']; 9 10 echo '用户名：'.$username.'密码：'.$password; 11 12 ?>
执行结果：
这是没有设置头文件的原因：
头文件设置如下：
1 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
设置后执行如下：
