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

　　在WEB開發中異步請求方式普遍使用，ajax技術減少程序員的工作量，也提升用戶交互體驗。AJAX的四種異步請求方式都能實現基本需求，閑話不多說，直接切入正題。

1.$.getJSON

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

　　

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

　　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。

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

//——項目中的實際案例
function changeAnswerShow(id){
    $.getJSON(
            "/legalconsult/admin/changeshowanswer",{id:id},　　　　//URL和參數
            function(data){
             if(data.error==0){　　　　　　　　　　　　　　　　　　　　//回調函數，與后台交互
                showSuccessMessage("操作成功,正在刷新。。。。");
                setTimeout("window.location.reload()",2200);
                var i=$("td.show"+id+" a i" );
                if(i.hasClass("splashy-gem_okay")){
                    i.removeClass("splashy-gem_okay").addClass("splashy-gem_remove");
                }else{
                   i.removeClass("splashy-gem_remove").addClass("splashy-gem_okay");
                }
                return true;
             }else{
                showErrorMessage(data.error);
                return false;
             }
           }
       );
}

 

　　2.$.get

　　$.get是以GET方式實現AJAX請求，在提交短數據時可用。但我基本不常用，因為$.getJSON完全滿足功能需要，正如上所說，結構合理、更加安全。即便是為了提交長數據，也不會選用$.get,而是$.post。但還是要了解其 用法：

$.get(
     url,
     [data],
     [ callback]
 ;)

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

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

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

//項目案例
$.get(
        "/legalconsult/answer/focus",
        {id:id},
        function(data){
            if(data.error==0){
                 var su=$("#focus_"+id).text();
                 su=parseInt(su);　　　　　　　　　　　　　　
                 su++;
                 $("#focus_"+id).text(su);　　　　　　//后台操作成功后返回error==0，在這里進行前端操作
                 var i=$("#show_"+id);
                 var j=$("<span><p class='icon-ok'></p>已贊同</span>");
                 i.empty().append(j);
                 return true;
            }else{
                showError(data.error);　　　　　　//調用其它函數，讀者可忽視
                return false;
            }
        }
);

3.$.post

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

$.post(
    url,
    [data],
    [callback],
    [type]
);

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

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

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

type：type為請求的數據類型，可以是html,xml,json等類型，如果我們設置這個參數為：json，那么返回的格式則是json格式的，如果沒有設置，就和$.get()返回的格式一樣，都是字符串的。

這個方法和$.get()用法差不多，唯獨多了一個type參數，那么這里就只介紹type參數吧，其他的參考上面$.get()的。

//實際項目案例
function changeMarkShow(id){
     $.post(
             "/legalconsult/admin/markquestion",{id:id},
             function(data){
                 if(data.error==0){
                     showSuccessMessage("操作成功,正在刷新。。。。");
                     setTimeout("window.location.reload()",2200);
                     var i=$("td.markshow"+id+" a i" );
                     if(i.hasClass("splashy-star_full")){
                         i.removeClass("splashy-star_full").addClass("splashy-gem_empty");
                     }else{
                         i.removeClass("splashy-gem_empty").addClass("splashy-gem_full");
                     }
                     return true;
                     }else{
                         showErrorMessage(data.error);
                         return false;
                     }
                },
            "json"                                             //聲明數據格式
             );
}

4.$.ajax

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

$.ajax(options)；

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

//示例
.ajax(
            url: "/legalconsult/layer/update-info",
            datatype:"json",
            type:'post',
            beforeSend:function(){
                            //函數體，數據發送前執行。
                     }
                      success：function(){
                            //函數體，數據發送成功回調
                      　　　　}
                      error: function(){
                            //函數體，數據發送錯誤時執行
                      　　    }
         );    

以上是我在做項目時遇到出問題時，通過查資料、測試得出的可行性方法；希望對你有所幫助~~

參考資料：

1.Http同步和異步請求區別  http://kevinpeng.iteye.com/blog/677797

2.W3school http://www.w3school.com.cn/ajax/

3.深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

http://www.itivy.com/jquery/archive/2011/7/6/jquery-get-post-getjson-ajax.html