Ajax最詳細的參數解析和場景應用

4.一、定義和用法

AJAX即「Asynchronous Javascript And XML」（異步JavaScript和XML），是指一種建立交互式 網頁應用的網頁開發技術。

AJAX = 異步  JavaScript和 XML（ 標準通用標記語言的子集）。

AJAX 是一種用於建立快速動態網頁的技術。

經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）若是須要更新內容，必須重載整個網頁頁面。

 ajax請求的經常使用的5個步驟以下：1.建立 XMLHTTPRequest對象；2.註冊回調函數;3.設置和服務器端的鏈接信息;4.發送數據;5.接受響應數據

4.二、寫法示例

該參數規定 AJAX 請求的一個或多個名稱/值對。

$.ajax({})的第一種寫法,success(),error()

$.ajax({
    type: "post", 【以POST或GET的方式請求。默認GET。PUT和DELETE也能夠用，有的瀏覽器不支持】
    url: url,   【請求的目的地址，須是一個字符串。】
    contentType: "application/json",       【以哪一種數據類型發送請求】
    data: data,    【請求的數據】
    dataType: "json",  【想從服務器獲得的數據類型。html,json,jsonp,text】
    async:false,【默認爲true異步請求，設置爲false時爲同步請求】
    beforeSend:function(){......},  【傳遞異步請求以前的事件】
    success:function(){......},  【請求成功以後的回調】
    error:function(){......},    【請求失敗以後的回調】
    complete(function(){......},  【無論請求成功仍是錯誤，只要請求完成，能夠執行的事件。】 
});

 $.ajax({})的第二種寫法,總結爲回調寫法.done(),.fail()

 $.ajax({
      type: "post",
      url: url,
      contentType: "application/json",
      data: '{ "requestData": { "SysId": 1, "SysType": "rzrq"}}',
      dataType: "json",
}).done(function (data) {
      console.log(JSON.parse(data));
      eventManger.trigger("showMergeLiCategorySuccess", data);
}).fail(function (msg) {
      console.log(JSON.parse(msg));
      eventManger.trigger("requestFailure", msg);
});

4.三、其餘參數以下：

dataType,類型：String

預期服務器返回的數據類型。若是不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，好比 XML MIME 類型就被識別爲 XML。在 1.4 中，JSON 就會生成一個 JavaScript 對象，而 script 則會執行這個腳本。隨後 服務器端返回的數據會根據這個值解析後，傳遞給 回調函數。可用值:

 contentType，發送請求數據類型

 

4.四、用ajax實現表單提交

<form id="formTest">
   <select name="single">
　　　　<option>Single</option>
　　　　<option>Single2</option>
　　</select>
　　<select name="multiple" multiple="multiple">
　　　　<option selected="selected">Multiple</option>
　　　　<option>Multiple2</option>
　　　　<option selected="selected">Multiple3</option>
　　</select>
　　<input type="checkbox" name="check" value="check1"/> check1
　　<input type="checkbox" name="check" value="check2" checked="checked"/> check2
　　<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
　　<input type="radio" name="radio" value="radio2"/> radio2
</form>

那麼用jQuery來作Ajax提交就這樣

$(function() {
    $('#submit').click(function() {
        $.ajax({
            url: '你的提交url地址',
            type: 'post',
            dataType:'json'
            data: $("#formTest").serializeArray(),//serializeArray方法會自動將表單轉換爲json對象
            success: function(msg) {
            }
        });
    });
}); 

// 好比你有以下的html結構

<form>
    ...
    <input type="submit" id="submit" value="提交">
</form>

// jquery代碼

$(function () {
    $('#submit').click(function () {
        $.ajax({
            url: '',
            method: 'post',
            data: {},
            success: function (msg) {
            }
        });
        // 別忘記了這句
        return false;
    });
});

 

參考文檔： http://www.w3school.com.cn/jquery/ajax_ajax.asp