js進階 14-4 $.get()方法和$.post()方法如何使用

一、總結

一句話總結：$.get（URL,callback); $.post(URL,data,callback); callback函數和load()方法里面的callback一樣。

1、load方法和$.get()以及$.post()方法的區別是什么（load也可以實現ajax的post和get請求）？

load方法是局部變量，前面需要加上監聽對象，監聽對象就是返回結果放置的元素
$.get()以及$.post()時全局方法，不必加上監聽對象

20             // $('#test').load('test.php?password=1234560')

40  $.get('testGet.php',{password:'123456'},function(responseTxt,statusTxt){ 41  // alert(responseTxt) 42  $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt) 43  })

2、$.get()提交數據四種方法？

a、url中?接參數

b、字符串（jquery1.3之后支持）

c、json對象

20                   //get方式提交數據1 21 /* 22  $.get('test.html',function(data,statusTxt){ 23  alert(data) 24  alert(statusTxt) 25  }) 26 27  //get方式提交數據2 28  $.get('testGet.php?password=123456',function(responseTxt,statusTxt){ 29  // alert(responseTxt) 30  $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt) 31  }) 32 33  //get方式提交數據3 34  $.get('testGet.php','password=123456',function(responseTxt,statusTxt){ 35  // alert(responseTxt) 36  $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt) 37  }) 38 39  //get方式提交數據4 40  $.get('testGet.php',{password:'123456'},function(responseTxt,statusTxt){ 41  // alert(responseTxt) 42  $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt) 43  }) 44 45  //post方式提交數據1 46  $.post('testPost.php',{password:'123456'},function(responseTxt,statusTxt){ 47  // alert(responseTxt) 48  $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt) 49  })

二、$.get()方法和$.post()方法如何使用

1、相關知識

get()和post()方法

兩種在客戶端和服務器端進行請求-響應的常用方法是：GET和POST.
GET基本上用於從服務器獲得（取回）數據。注釋：GET方法可能返回緩存數據。
POST也可用於從服務器獲取數據。不過，POST方法不會緩存數據，並且常用於連同請求一起發送數據。

$.get（URL,callback);
參數
1. 第一個參數是我們希望請求的URL;
2. 第二個參數是回調函數。第一個回調參數存有被請求頁面的內容，第二個回調參數存有請求的狀態。
$.post(URL,data,callback);
參數
1. 必需的URL參數規定您希望請求的URL。
2. 可選的data參數規定連同請求發送的數據
3. 可選的callback參數是請求成功后所執行的函數名。第一個回調參數存有被請求頁面的內容，而第二個參數存有請求的狀態
4. type：返回內容格式,xml,html,script,json,text,_default。

2、代碼

html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文檔</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10       </style>
11 </style>
12 </head>
13 <body>
14     <input type="button" id="btn" value="Ajax測試">
15     <div id="test"></div>
16 <script type="text/javascript">
17 $(function(){
18         $(function(){
19             $('#btn').click(function(){
20                   //get方式提交數據1
21               /*
22                   $.get('test.html',function(data,statusTxt){
23                       alert(data)
24                       alert(statusTxt)
25                   })    
26              
27                   //get方式提交數據2
28                   $.get('testGet.php?password=123456',function(responseTxt,statusTxt){
29                       // alert(responseTxt)
30                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
31                   })
32         
33                //get方式提交數據3
34                   $.get('testGet.php','password=123456',function(responseTxt,statusTxt){
35                       // alert(responseTxt)
36                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
37                   })
38                   
39                    //get方式提交數據4
40                   $.get('testGet.php',{password:'123456'},function(responseTxt,statusTxt){
41                       // alert(responseTxt)
42                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
43                   })
44              
45                //post方式提交數據1
46                   $.post('testPost.php',{password:'123456'},function(responseTxt,statusTxt){
47                       // alert(responseTxt)
48                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
49                   })
50                */
51    //post方式提交數據2
52               $.post('testPost.php','password=123456',function(responseTxt,statusTxt){
53                       // alert(responseTxt)
54                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
55                   })
56         })
57     })
58 })
59 </script>
60 </body>
61 </html>

php（post請求和get請求）

get

1 <?php
2     //get方式提交數據
3     if ($_GET['password']=='123456') {
4         echo "登陸成功";
5     }else{
6         echo "密碼錯誤";
7     }
8 
9 ?>

post

1 <?php
2     // //post方式提交數據
3     if ($_POST['password']=='123456') {
4         echo "登陸成功";
5     }else{
6         echo "密碼錯誤";
7     }
8 ?>

免責聲明！

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

猜您在找 js發送get 、post請求的方法簡介 js進階 14-5 $.getScript()和$.getJSON()方法的作用是什么 axios基本的get/post請求使用方法 2 request的get和post方法 axios的get,post方法 HTTP方法：GET和POST get和post方法的區別 vue axios數據請求get、post方法的使用 c# 使用HttpClient的post,get方法傳輸json JQuery------$.get()和$.post()傳遞數據的使用方法