簡單理解jQuery中$.getJSON、$.get、$.post、$.ajax用法

時間 2019-11-12

標籤簡單理解 jquery getjson post ajax 用法欄目 JQuery 简体版

原文原文鏈接

　　在WEB開發中異步請求方式廣泛使用，ajax技術減小程序員的工做量，也提高用戶交互體驗。AJAX的四種異步請求方式都能實現基本需求，閒話很少說，直接切入正題。html

1.$.getJSON前端

　　$.getJSON()是專門爲ajax獲取json數據而設置的，而且支持跨域調用，其語法的格式爲：jquery

1 $.getJSON(
2       url,                 //請求URL
3       [data],           //傳參，可選參數
4       [callback]       //回調函數，可選參數
5   　);

　　url：string類型，發送請求地址
　　data ：可選參數，待發送 Key/value 參數，同get，post類型的data
　　callback ：可選參數，載入成功時回調函數，同get，post類型的callback程序員

　　JSON是一種理想的數據傳輸格式，它可以很好的融合與JavaScript或其餘宿主語言，而且能夠被JS直接使用。使用JSON相比傳統的經過 GET、POST直接發送「裸體」數據，在結構上更爲合理，也更爲安全。至於jQuery的getJSON()函數，只是設置了JSON參數的 ajax()函數的一個簡化版本。這個函數也是能夠跨域使用的，相比get()、post()有必定優點。另外這個函數能夠經過把請求url寫成"myurl?callback=X"這種格式，讓程序執行回調函數X。ajax

　　特別注意：$.getJSON是以GET方式提交數據，因此不能提交過大的數據量，可選$.post。至於如何修改成可用POST方式提交或者擴大GET提交數據量的問題，沒有深刻研究。json

 1 //——項目中的實際案例
 2 function changeAnswerShow(id){
 3     $.getJSON(
 4             "/legalconsult/admin/changeshowanswer",{id:id},　　　　//URL和參數
 5             function(data){
 6              if(data.error==0){　　　　　　　　　　　　　　　　　　　　//回調函數，與後臺交互
 7                 showSuccessMessage("操做成功,正在刷新。。。。");
 8                 setTimeout("window.location.reload()",2200);
 9                 var i=$("td.show"+id+" a i" );
10                 if(i.hasClass("splashy-gem_okay")){
11                     i.removeClass("splashy-gem_okay").addClass("splashy-gem_remove");
12                 }else{
13                    i.removeClass("splashy-gem_remove").addClass("splashy-gem_okay");
14                 }
15                 return true;
16              }else{
17                 showErrorMessage(data.error);
18                 return false;
19              }
20            }
21        );
22 }

　　2.$.get跨域

　　$.get是以GET方式實現AJAX請求，在提交短數據時可用。但我基本不經常使用，由於$.getJSON徹底知足功能須要，正如上所說，結構合理、更加安全。即使是爲了提交長數據，也不會選用$.get,而是$.post。但仍是要了解其用法：安全

1 $.get(
2      url,
3      [data],
4      [ callback]
5  ;)

　　url：string類型，ajax請求的地址。服務器

　　data：可選參數，object類型，發送至服務器的key/value數據會做爲QueryString附加到請求URL中。app

　　callback：可選參數，function類型，當ajax返回成功時自動調用該函數。

 1 //項目案例
 2 $.get(
 3         "/legalconsult/answer/focus",
 4         {id:id},
 5         function(data){
 6             if(data.error==0){
 7                  var su=$("#focus_"+id).text();
 8                  su=parseInt(su);　　　　　　　　　　　　　　
 9                  su++;
10                  $("#focus_"+id).text(su);　　　　　　//後臺操做成功後返回error==0，在這裏進行前端操做
11                  var i=$("#show_"+id);
12                  var j=$("<span><p class='icon-ok'></p>已贊同</span>");
13                  i.empty().append(j);
14                  return true;
15             }else{
16                 showError(data.error);　　　　　　//調用其它函數，讀者可忽視
17                 return false;
18             }
19         }
20 );

3.$.post

　　我在提交評論或者留言之類的數據時常常使用$.post,不廢話上代碼：

1 $.post(
2     url,
3     [data],
4     [callback],
5     [type]
6 );

url：string類型，ajax請求的地址。

data：可選參數，object類型，發送至服務器的key/value數據會做爲QueryString附加到請求URL中。

callback：可選參數，function類型，當ajax返回成功時自動調用該函數。

type：type爲請求的數據類型，能夠是html,xml,json等類型，若是咱們設置這個參數爲：json，那麼返回的格式則是json格式的，若是沒有設置，就和$.get()返回的格式同樣，都是字符串的。

這個方法和$.get()用法差很少，惟獨多了一個type參數，那麼這裏就只介紹type參數吧，其餘的參考上面$.get()的。

 1 //實際項目案例
 2 function changeMarkShow(id){
 3      $.post(
 4              "/legalconsult/admin/markquestion",{id:id},
 5              function(data){
 6                  if(data.error==0){
 7                      showSuccessMessage("操做成功,正在刷新。。。。");
 8                      setTimeout("window.location.reload()",2200);
 9                      var i=$("td.markshow"+id+" a i" );
10                      if(i.hasClass("splashy-star_full")){
11                          i.removeClass("splashy-star_full").addClass("splashy-gem_empty");
12                      }else{
13                          i.removeClass("splashy-gem_empty").addClass("splashy-gem_full");
14                      }
15                      return true;
16                      }else{
17                          showErrorMessage(data.error);
18                          return false;
19                      }
20                 },
21             "json"                                             //聲明數據格式
22              );
23 }

4.$.ajax

　　$.ajax是一種經常使用的普通封裝異步方式。

1 $.ajax(options)；

　　options是一個object類型，它指明瞭本次ajax調用的具體參數。呈上代碼：

 1 //示例
 2 .ajax(
 3             url: "/legalconsult/layer/update-info",
 4             datatype:"json",
 5             type:'post',
 6             beforeSend:function(){
 7                             //函數體，數據發送前執行。
 8                      }
 9                       success：function(){
10                             //函數體，數據發送成功回調
11                       　　　　}
12                       error: function(){
13                             //函數體，數據發送錯誤時執行
14                       　　    }
15          );