jquery ajax實例教程和一些高級用法

原文鏈接：https://blog.csdn.net/WuLex

jquery ajax的調用方式：jquery.ajax(url,[settings])，jquery ajax常用參數：紅色標記參數幾乎每個ajax請求都會用到這幾個參數，本文將介紹更多jquery ajax實例，後面會有一些ajax高級用法

jquery ajax的調用方式：jquery.ajax(url,[settings])，因爲實際使用過程中經常配置的並不多，所以這裏並沒有列出所有參數，甚至部分參數默認值，就是最佳實踐，根本沒必要去自己定義，除非有特殊需求，如果需要所有參數，可以查看jquery api

jquery ajax常用參數：

$.ajax({
    url: "test.html",  //ajax請求地址
    cache: false,//(默認: true,dataType爲script和jsonp時默認爲false)設置爲 false 將不緩存此頁面，建議使用默認
    type:"GET",//請求方式 "POST" 或 "GET"， 默認爲 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。
    dataType:"json",    //根據返回數據類型可以有這些類型可選：xml html script json jsonp text
    //發送到服務器的數據，可以直接傳對象{a:0,b:1}，如果是get請求會自動拼接到url後面，如：&a=0&b=1
    //如果爲數組，jQuery 將自動爲不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換爲 "&foo=bar1&foo=bar2"。
    data:{},
    //發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。XMLHttpRequest 對象是唯一的參數。這是一個 Ajax 事件。如果返回false可以取消本次ajax請求。
    beforeSend:function(xhr){
        //this 默認爲調用本次AJAX請求時傳遞的options參數
    },
    //context這個對象用於設置ajax相關回調函數的上下文。也就是說，讓回調函數內this指向這個對象（如果不設定這個參數，那麼this就指向調用本次AJAX請求時傳遞的options參數）。
    //比如指定一個DOM元素作爲context參數，這樣就設置了success回調函數的上下文爲這個DOM元素。
    context: document.body,
    //請求成功後的回調函數
    success: function(data,textStatus){
        //this 調用本次AJAX請求時傳遞的options參數 ,如果設置context來改變了this，那這裏的this就是改變過的
    },
    //請求失敗時調用此函數。有以下三個參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。
    //如果發生了錯誤，錯誤信息（第二個參數）除了得到null之外，還可能是"timeout", "error", "notmodified" 和 "parsererror"。
    error：function(XMLHttpRequest, textStatus, errorThrown){
        // 通常 textStatus 和 errorThrown 之中
        // 只有一個會包含信息
        // this 調用本次AJAX請求時傳遞的options參數
    },
    //請求完成後回調函數 (請求成功或失敗之後均調用)。參數： XMLHttpRequest 對象和一個描述成功請求類型的字符串
    complete:function(XMLHttpRequest, textStatus) {
        //this 調用本次AJAX請求時傳遞的options參數
    },
    //一組數值的HTTP代碼和函數對象，當響應時調用了相應的代碼。例如，如果響應狀態是404，將觸發以下警報：
    statusCode:{
        404:function(){
            alert('404，頁面不存在');
        }
    }
});

jquery ajax發送一個get請求，數據返回爲json

實戰中最常用到的ajax方式獲取數據，一般用get方式

$.ajax({
    type: "GET",
    url: "page.php",
    dataType:'json',
    data: {id:1001},//也可以是字符串鏈接"id=1001"，建議用對象
    success: function(data){
        console.log("返回的數據: " + data );
    }
});

jquery ajax發送一個post請求，數據返回爲json

實戰中最常用到的ajax方式提交數據，提交一般用post方式

$.ajax({
    type: "POST",
    url: "page.php",
    dataType:'json',
    data: {name:"張三",sex:1},//也可以是字符串鏈接"name=張三&sex=1"，建議用對象
    success: function(data){
        //實際操作的時候，返回的json對象中可能會有成功錯誤的判斷標記，所以可能也需要判斷一下
        console.log("返回的數據: " + data );
    }
});

jquery ajax發送一個get請求，簡寫方式：

其實就是對ajax的二次封裝，大家可以對照ajax的底層api

//$.get("請求url","發送的數據對象","成功回調","返回數據類型");
$.get("test.cgi",{ name: "John", time: "2pm" },
   function(data){
      alert("Data Loaded: " + data);
},'json');

jquery ajax發送一個POST請求，簡寫方式：

其實就是對ajax的二次封裝，大家可以對照ajax的底層api

//$.post("請求url","發送的數據對象","成功回調","返回數據類型");
$.post("test.cgi",{ name: "John", time: "2pm" },
   function(data){
      alert("Data Loaded: " + data);
},'json');

jquery ajax經常用到的一個工具函數

ajax提交數據的時候，通常是提交一個表單，所以，序列化表單數據就非常有用，如：$("form").serialize()

//完整實例如：（表單html結構不在寫）
    $("form").on("submit",function(){
        var url = this.action;   //可以直接取到表單的action
        var formData = $(this).serialize();
        $.post(url,formData,
            function(data){
                //返回成功，可以做一個其他事情
                console.log(data);
            },'json');

        //阻止表單默認提交行爲
        return false
    })

jquery ajax請求成功回調改寫成連寫方式.done

ajax請求成功通常是使用回調的方式處理返回數據，其實jquery中也可以使用連寫方式而不是回調的方式。如下：

//該參數可以是一個函數或一個函數的數組。當延遲成功時，done中函數被調用。回調執行是依照他們添加的順序。
//一旦deferred.done()返回延遲對象，延遲對象的其它方法也可以鏈接到了這裏，包括增加.done()方法。當延遲解決，web前端開發
$.get("ajax.php").done(function() {
    //延遲成功
    alert("ok");
}).fail(function(){
    //延遲失敗;
    alert("$.get failed!");
});

jquery ajax連寫方式還有一個二合一的方法.then，.then還可以寫多個，後面的.then可以使用前面.then中的結果

$.get("test.php").then(
    function(){
        //延遲成功
    },
    function(){
        //延遲失敗;
    }
);

jquery ajax還有一個jQuery.when方法

提供一種方法來執行一個或多個對象的回調函數，延遲對象通常表示異步事件。 如果單一延遲傳遞給jQuery.when ，它是通過這個方法和延遲對象附加的其他方法可訪問綁定的回調函數返回的，如defered.then 。
當延遲得到解決或者拒絕，通常的代碼創建了原來的延遲，適當的回調將被調用。 如下：

//兩個全部請求成功纔會執行回調  此api在jquery api的 “工具”一欄下面有詳細介紹
$.when($.ajax("p1.php"), $.ajax("p2.php"))
  .then(function(){
        //兩個全部請求成功
    }, function(){
        //任何一個執行失敗
    });

jquery ajax的一個實戰例子，ajax請求服務集中到service.js中

這裏把jquery ajax請求寫成一個服務，比如service.js中有如下代碼：

//每次都要重複的ajax代碼和一些數據處理，全局提示都可以寫到這裏面了，當然這裏面不要有業務邏輯，只做些數據處理和部分提示
function myService(){
    return {
        query: function (data) {
            var _data = data||{};
            return $.get("test.php",_data).then(
                    function(){//延遲成功},
                    function(){//延遲失敗;}
                );
        },
        submit: function (data) {
            var _data = data||{};
            return $.post("test.php",_data).then(
                    function(){},
                    function(){}
                );
        }
    }
}
//當然這裏面的 代碼應該做模塊化處理，而不是直接向這樣聲明一個全局的myService