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; ?>
执行结果：
这是没有设置头文件的原因：
头文件设置如下：
1 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
设置后执行如下：
