1. 程式人生 > >Ajax最詳細的引數解析和場景應用

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

4.1、定義和用法

AJAX即“Asynchronous Javascript And XML”(非同步JavaScript和XML),是指一種建立互動式網頁應用的網頁開發技術。

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

通過在後臺與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。

傳統的網頁(不使用 AJAX)如果需要更新內容,必須過載整個網頁頁面。

ajax請求的常用的5個步驟如下:1.建立 XMLHTTPRequest物件;2.註冊回撥函式;3.設定和伺服器端的連線資訊;4.傳送資料;5.接受響應資料

4.2、寫法示例

該引數規定 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.3、其他引數如下:

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

dataType,型別:String

預期伺服器返回的資料型別。如果不指定,jQuery 將自動根據 HTTP 包 MIME 資訊來智慧判斷,比如 XML MIME 型別就被識別為 XML。在 1.4 中,JSON 就會生成一個 JavaScript 物件,而 script 則會執行這個指令碼。隨後伺服器端返回的資料會根據這個值解析後,傳遞給回撥函式。可用值:

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

contentType,傳送請求資料型別

4.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;
    });
});