Detailed explanation of jQuery.ajax() function usage examples in jquery

jQuery.ajax() function is the implementation of AJAX technology encapsulated by jQuery. Through this function, we can obtain data on the remote server without refreshing the current page. Used to load remote data through background HTTP requests.

jQuery.ajax() function is the underlying AJAX implementation of jQuery. jQuery.get(), jQuery.post(), load(), jQuery.getJSON(), jQuery.getScript() and other functions are all simplified forms of this function (they all call this function, but the parameter settings are different or have some differences) omitted).

This function belongs to the global jQuery object (can also be understood as a static function).

Syntax

##jQuery 1.0 Added this static function. The jQuery.ajax() function has the following two usages:

Usage one:

jQuery.ajax( [ settings ] ] )

Usage two: jQuery 1.5 newly supports this usage.

jQuery.ajax( url [, settings ] ] )

Usage 2 is a variation of usage 1. It just extracts the optional attribute url in the parameter object settings as an independent parameter.

Parameters

Please find the corresponding parameter according to the parameter name defined in the previous syntax section.

url String type URL request

String.

settings Optional/

Object classType an Object object, each property of which is used to specify additional parameter settings required to send the request. The parameter settings is an object.

Return value

jQuery.ajax()

The return value of the function is of jqXHR type and returns the jqXHR object of the current request ( jQuery 1.4 and earlier versions return the native XMLHttpRequest object).

Example code description:

If no parameters are specified for jQuery.ajax(), the default request is the current page, and the returned data will not be processed.

In the settings object of the jQuery.ajax() function, commonly used attributes are: url, type, async, data, dataType, success, error, complete, beforeSend, timeout, etc.

Please refer to the following initial HTML code:

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

The following is the jQuery sample code related to the jQuery.ajax() function to demonstrate the specific usage of the jQuery.ajax() function:

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

#

The above is the detailed content of Detailed explanation of jQuery.ajax() function usage examples in jquery. For more information, please follow other related articles on the PHP Chinese website!