Ajax最詳細的參數解析和情境應用

標籤：自動   image   show   type   表單   pos   erro   request   接受   

4.1、定義和用法AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。AJAX = 非同步 JavaScript和XML（標準通用標記語言 (SGML)的子集）。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、其他參數如下：

dataType,類型：String預期伺服器返回的資料類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊來智能判斷，比如 XML MIME 類型就被識別為 XML。在 1.4 中，JSON 就會產生一個 JavaScript 對象，而 script 則會執行這個指令碼。隨後伺服器端返回的資料會根據這個值解析後，傳遞給回呼函數。可用值: 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;    });});

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

Ajax最詳細的參數解析和情境應用