JQuery---$.ajax()

ajax手冊

一、$.ajax()送出

1.url：發送請求的位址，要求是String類型

2.type：請求方法(post或者get)，預設是get，要求是String類型

3.timeout：設定請求逾時時間（毫秒），要求是number類型

4.async：預設true，所有請求是異步，要求是Bool類型的參數，如果需要發送同步請求，将此項設定為false。注意：同步時浏覽器會被鎖住

5.cache：預設為true(當datatype為script時，預設為false)從浏覽器緩存中加載請求資訊，要求是Bool類型

6.data：發送到伺服器的資料，要求是Object或string類型。

7.dataType：預期伺服器傳回的資料類型，要求為String類型的參數。

8.beforeSend：發送請求前修改XMLHttpRequest對象的函數。要求為Function類型。

9.complete：請求完成後調用的回調函數（請求成功或失敗時均調用）。要求為Function類型

10.success：請求成功後調用的回調函數,要求為Function類型

         (1)由伺服器傳回，并根據dataType參數進行處理後的資料。

         function(data, textStatus){

            //data可能是xmlDoc、jsonObj、html、text等等

            this;  //調用本次ajax請求時傳遞的options參數

         }

11.error:

說明：請求失敗時被調用的函數。要求為Function類型的參數，該函數有3個參數，即XMLHttpRequest對象、錯誤資訊、捕獲的錯誤對象(可選)。ajax事件函數如下：

       function(XMLHttpRequest, textStatus, errorThrown){

          //通常情況下textStatus和errorThrown隻有其中一個包含資訊

          this;   //調用本次ajax請求時傳遞的options參數

       }

12.contentType：

說明：内容編碼類型。要求為String類型的參數，當發送資訊至伺服器時，内容編碼類型預設為"application/x-www-form-urlencoded"。該預設值适合大多數應用場合。

13.dataFilter：給Ajax傳回的原始資料進行預處理的函數。要求為Function類型

15.global：Boolean類型，預設為true。表示是否觸發全局ajax事件。

16.ifModified：Boolean類型,預設為false。僅在伺服器資料改變時擷取新資料。

17.jsonp：要求為String類型的參數，在一個jsonp請求中重寫回調函數的名字。

18.username：要求為String類型的參數，用于響應HTTP通路認證請求的使用者名。

19.password：要求為String類型的參數，用于響應HTTP通路認證請求的密碼。

20.processData：要求為Boolean類型的參數，預設為true。

21.scriptCharset：要求為String類型的參數，隻有當請求時dataType為"jsonp"或者"script"

22.$.each()函數:$.each()函數不同于JQuery對象的each()方法，它是一個全局函數，不操作JQuery對象，而是以一個數組或者對象作為第1個參數，以一個回調函數作為第2個參數。回調函數擁有兩個參數：第1個為對象的成員或數組的索引，第2個為對應變量或内容。

案例展示：

login.html代碼：

//$表示juery對象
$.ajax({
                    async: false,
                    type: "post",  //資料送出方式（post/get）
                    url: "/editPassword",  //送出到的url
                    contentType : "application/x-www-form-urlencoded; charset=utf-8",
                    data: {"username": username, "oldPassword": oldPassword, "newPassword": newPassword},//送出的資料
                    dataType: "text",//傳回的資料類型格式
                    success: function (msg) {     //msg 是controller中return傳回的值
                        alert(msg.toString());

                        if (msg == "wang") {  //修改成功
                            //修改成功處理代碼...
                            alert("修改成功")

                        } else {  //修改失敗
                            //修改失敗處理代碼...
                            alert("修改失敗")
                        }
                    }
                });
           

controller代碼展示：

@RequestMapping("/editPassword")
    @ResponseBody
    public String editPassword(HttpServletRequest request) {
        String oldPassword = request.getParameter("oldPassword");
        System.out.println("...........editPass.oldPassword:....." + oldPassword);

        return "wang";
    }
           

二、$.getJSON()方法

jQuery中的$.getJSON( )方法函數主要用來從伺服器加載json編碼的資料，它使用的是GET HTTP請求

文法 ：jQuery.getJSON(url,data,success(data,status,xhr))
           

參數	描述
url	必需。規定将請求發送的哪個 URL。
data	可選。規定連同請求發送到伺服器的資料。
success(data,status,xhr)	可選。規定當請求成功時運作的函數。 額外的參數： response - 包含來自請求的結果資料 status - 包含請求的狀态 xhr - 包含 XMLHttpRequest 對象

案例：

html頁面

<div class="category-wrap"></div>
           

js頁面

$.getJSON(listUrl,function (data) {
            if (data.success){
                var datalist = data.data;
                $('.category-wrap').html('');
                var tempHtml='';
                datalist.map(function (item, index) {
                    tempHtml += ''
                        + '<div class="row row-product-category now">'
                        + '<div class="col-33 product-category-name">'
                        + item.productCategoryName
                        + '</div>'
                        + '<div class="col-33">'
                        + item.priority
                        + '</div>'
                        + '<div class="col-33"><a href="#" target="_blank" rel="external nofollow"  class="button delete" data-id="'
                        + item.productCategoryId
                        + '">删除</a></div>'
                        + '</div>';
                });
                $('.category-wrap').append(tempHtml);
            }