jquery中的jQuery.ajax()函數用法實例詳解

jQuery.ajax()函數是jQuery封裝的AJAX技術實現，透過該函數，我們無需刷新當前頁面即可獲取遠端伺服器上的資料。 用於透過後台HTTP請求載入遠端資料。

jQuery.ajax()函數是jQuery的底層AJAX實作。 jQuery.get()、 jQuery.post()、load()、 jQuery.getJSON()、 jQuery.getScript()等函數都是此函數的簡化形式(都會呼叫函數，只是參數設定有所不同或有所省略)。

此函數屬於全域jQuery物件(也可理解為靜態函數)。

語法

#jQuery 1.0 新增此靜態函數。 jQuery.ajax()函數有以下兩種用法：

用法一：

jQuery.ajax( [ settings ] ] )

用法二：jQuery 1.5 新增支援該用法。

jQuery.ajax( url [, settings ] ] )

用法二是用法一的變體，它只是將參數物件settings中的可選屬性url單獨提取出來作為一個獨立的參數。

參數

請根據前面語法部分所定義的參數名稱尋找對應的參數。

url    String類型URL請求字串。    

settings    可選/Object類別類型一個Object物件，其中的每個屬性用來指定傳送請求所需的額外參數設定。 參數settings是一個物件。

傳回值

jQuery.ajax()函數的傳回值為jqXHR類型，傳回目前該要求的jqXHR物件( jQuery 1.4及以前版本回傳的是原生的XMLHttpRequest物件)。

實例程式碼說明：

#如果沒有給jQuery.ajax()指定任何參數，則預設請求目前頁面，並且不對返回資料進行處理。

jQuery.ajax()函數的settings物件中，常用的屬性有：url、type、async、data、dataType、success、error、complete、beforeSend、timeout等。

請參考下面這段初始HTML程式碼：

<div id="content"></div>

以下是與jQuery.ajax()函數相關的jQuery範例程式碼，以示範jQuery.ajax()函數的具體用法：

$.ajax({
     url: "jquery_ajax.php"
    , type: "POST"
    , data: "name=codeplayer&age=18"
    , success: function( data, textStatus, jqXHR ){
        // data 是返回的数据
        // textStatus 可能为"success"、"notmodified"等
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        alert("返回的数据" + data);
    }
});

$.ajax({
     url: "jquery_ajax.php?page=1&id=3"
    , type: "POST"
    // jQuery会自动将对象数据转换为 "name=codeplayer&age=18&uid=1&uid=2&uid=3"
    , data: { name:"codeplayer", age:18, uid: [1, 2, 3] }
    // 请求成功时执行
    , success: function( data, textStatus, jqXHR ){
        alert("返回的数据" + data);
    }
    // 请求失败时执行
    , error: function(jqXHR, textStatus, errorMsg){
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        // textStatus 可能为： null、"timeout"、"error"、"abort"或"parsererror"
        // errorMsg 可能为： "Not Found"、"Internal Server Error"等
        alert("请求失败：" + errorMsg);
    }
});

// 将url单独提取出来作为第一个参数(jQuery 1.5+才支持)
$.ajax("jquery_ajax.php?action=type&id=3", {
     dataType: "json" // 返回JSON格式的数据
    , success: function( data, textStatus, jqXHR ){
        // 假设返回的字符串数据为{ "name": "CodePlayer", age: 20 }
        // jQuery已帮我们将该JSON字符串转换为对应的JS对象，可以直接使用
        alert( data.name ); // CodePlayer
    }   
});

$.ajax( {
    // 注意这里有个参数callback=?
     url: "http://cross-domain/jquery_ajax.php?name=Jim&callback=?&age=21"
    , async: false // 同步请求，发送请求后浏览器将被锁定，只有等到该请求完成(无论成功或失败)后，用户才能操作，js代码才会继续执行
    , dataType: "jsonp" // 返回JSON格式的数据
    , success: function( data, textStatus, jqXHR ){
        // 假设返回的字符串数据为{ "site_name": "CodePlayer", "site_desc": "专注于编程开发技术分享" }
        // jQuery已帮我们将该JSON字符串转换为对应的JS对象，可以直接使用
        alert( data.site_desc ); // 专注于编程开发技术分享
    }   
});

$.ajax( {
    // 加载指定的js文件到当前文档中
     url: "http://code.jquery.com/jquery-1.8.3.min.js"
    , dataType: "script"
});

####################################################### #############

以上是jquery中的jQuery.ajax()函數用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！