The Jquery getJSON method is analyzed in detail

  • 2020-03-30 01:03:49
  • OfStack

The preparatory work
・ Customer class


public class Customer
{
    public int Unid { get; set; }
    public string CustomerName { get; set; }
    public string Memo { get; set; }
    public string Other { get; set; }
}

, server-side processing (json_1.ashx)

Customer customer = new Customer 
      { Unid=1,CustomerName=" Sung river ",Memo=" Day kuixing ",Other=" Black saburo "};
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);
context.Response.Write(strJson);

(1) Jquery. GetJSON

Method definition: jQuery. GetJSON (url, data, callback)

Get the json data through the get request
, the url is used to provide the address page of the json data
, data(Optional) is used for key-value pairs passed to the server
, callback(Optional) callback function, json data request after the success of the processing function


function(data, textStatus) {
        //Data is a json object
        // textStatus will be "success"
       this; // the options for this ajax request
}

(1) an object

$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
       $("#divmessage").text(data.CustomerName);
    }
);

Json data is requested from the json_1.ashx address, and after receiving the data, the data is processed in the function. The data of the data here is a record corresponding to a customer instance where the data exists as k/v. That is, in the form of an [object,object] array.
{" Unid ": 1," CustomerName ":" sung river ", "Memo" : "day kuixing", "Other" : "black saburo"}

Therefore, when accessing, access by data.property, the following k/v loop to print the record of song jiang:


$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
        var tt="";
        $.each(data, function(k, v) {
            tt += k + " : " + v + "<br/>";
        })
        $("#divmessage").html(tt);
});

Results:
Unid: 1.
CustomerName: sung river
Memo: sky-kuixing
Other: black saburo

(2) object array
Ashx file (json_1.ashx) modified:


List<Customer> _list = new List<Customer>(); 
Customer customer = new Customer 
       { Unid=1,CustomerName=" Sung river ",Memo=" Day kuixing ",Other=" Black saburo "};
Customer customer2 = new Customer 
       { Unid = 2, CustomerName = " With wu ", Memo = " Cat was star ", Other = " g-star " };
_list.Add(customer);
_list.Add(customer2);
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list); 

The string of the json object it generates is:

[{" Unid ": 1," CustomerName ":" sung river ", "Memo" : "day kuixing", "Other" : "black saburo"},
{" Unid ": 2," CustomerName ":" by wu ", "Memo" : "star cat", "Other" : "resource"}]

Here you can see that the json object as a collection is not another record, but two records, is a [[object,object]] array: [object,object][object,object] [object,object], and each [object,object] represents a record, corresponding to a Customer, which is actually in the form of k/v, and this v is a Customer object, and this k is the index from 0.


$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
        $.each(data, function(k, v) {
            alert(k);
        });
});

At this point, k is 0,1...

Method to list json objects:


$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
        var tt = "";
        $.each(data, function(k, v) {
            $.each(v,function(kk, vv) {
                tt += kk + " : " + vv + "<br/>";
            });
        });
        $("#divmessage").html(tt);
});

Results:
Unid: 1.
CustomerName: sung river
Memo: sky-kuixing
Other: black saburo
Unid: 2
CustomerName: use wu
Memo: skystar
Other: you're smart
 

Nested loops are used here, the first loop to iterate over the Customer object from the List, and the second loop to iterate over the properties of the Customer object from the Customer object, namely k/v pairs.


Related articles: