AJax中post與get請求注意事項

本文轉載自查看原文 2016-11-04 17:01 1521 PHP

在使用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');

設置后執行如下：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 在uniapp中請求接口及注意事項 SpringMVC處理ajax請求的跨域問題和注意事項 ajax return 注意事項原生ajax中get和post請求 Ajax請求-get(),post() CI框架中，判斷post,ajax,get請求的方法 Ajax中post與get的區別 Qt中的QByteArray使用注意事項 Java中Optional使用注意事項 html中寫python注意事項