Detailed explanation on the usage of jQuery.getJSON() function

The jQuery.getJSON() function is used to obtain remote JSON-encoded data through an AJAX request in the form of HTTP GET.

JSON is a data format. JS natively supports JSON format. jQuery will first try to convert the JSON data obtained from the server through jQuery.getJSON() into the corresponding JS object.

If the requested URL includes "callback=?" and other similar parts, jQuery will automatically treat it as JSONP and execute the corresponding callback function to obtain JSON data.

Important note: The JSON data returned by the server must comply with strict JSON syntax. For example: all attribute names must be enclosed in double quotes, and all string values ​​must also be enclosed in double quotes (instead of single quotation marks).

Please note that this function loads data asynchronously.

This function belongs to the global jQuery object.

Syntax

jQuery 1.0 adds this static function.

jQuery.getJSON( url [, data ] [, success ] )

Parameters

Parameter Description

url String type specifies the target URL of the request.

data Optional/String/Object class type sends the data passed by the request.

success Optional/Callback function executed when the Function type request is successful. It has 3 parameters: one is the data returned by the request, the other is the request status text (such as "success", "notmodified"), and the third is the current jqXHR object (jQuery 1.4 and previous versions, this parameter is the native XMLHttpRequest object).

The callback function specified by the parameter success will only be executed when the request is successful. If the request fails (such as page not found, server error, etc.), no processing will be performed.

Return value

jQuery.getJSON()The return value of the function is of jqXHR type and returns the jqXHR object that sent the request (jQuery 1.4 and previous versions return the native XMLHttpRequest object).

Example & Description

jQuery.getJSON() is the following abbreviation of jQuery.ajax() function:

jQuery.getJSON(url, data, success);
// 等价于
$.ajax({
 url: url,
 type: "GET",
 data: data,
 success: success,
 dataType: "json"
});

Please refer to the following HTML sample code:

<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">http://www.365mini.com</div>

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

//获取index.php?type=json的JSON数据，但不作任何处理
$.getJSON( "index.php?type=json" );
// 等价于 index.php?id=5&orderId=5&money=100
$.getJSON( "index.php?id=5", "orderId=5&money=100" );
// 等价于 http://localhost/index.php?id=5&orderId=5&money=100
$.getJSON( "http://localhost/index.php?id=5", {orderId: 5, money: 100} );
/* ***** 一般不会使用上述不对获取的JSON数据作任何处理的用法***** */
// 获取index.php?type=json的JSON数据，获取成功时弹出对话框
$.getJSON( "index.php?type=json", function(data, textStatus, jqXHR){
    // data 是该请求返回的数据(可能经过处理)
    // textStatus 可能是"success"、 "notmodified"等
    // jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
    // 如果服务器返回的JSON格式的数据是 {"id": 5, "name": "CodePlayer"}
    // JSON格式的数据的属性名称必须加双引号，字符串值必须加双引号。
    // jQuery已经将其转换成对应的JS对象
    alert( data.id ); // 5
    alert( data.name ); // CodePlayer
} );
// 获取"/action.php?m=list&page=2&size=10"的JSON数据，获取成功时弹出对话框
$.getJSON( "/action.php?m=list", { page: 2, size: 10  }, function(data, textStatus, jqXHR){
    // 如果服务器返回的JSON格式的数据是 [ {"id":11, "title":"文章11"}, {"id":12, "title":"文章12"}, {"id":13, "title":"文章13"} ]
    // jQuery将获取的JSON格式数据转换为JS数组
    for(var i in data){
        var obj = data[i];
        alert( obj.title );
    }
} );

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