Console access jquery--------JSON

Source: Internet
Author: User
Tags string to json

JQ = document.createelement (' script ');
JQ.SRC = "File:///home/liulqiang/jquery.js";
document.getElementsByTagName (' head ') [0].appendchild (JQ);
Jquery.noconflict ();

In the process of web data transfer, JSON is transmitted in the form of text, which is a lightweight type of string, while the client generally uses JS to manipulate the JSON object that is received, so the conversion between JSON object and JSON string and parsing of JSON data are key.

First clear 2 concepts such as:

JSON string:

var str1 = ' {' name ': ' Deyuyi ', ' sex ': ' Man '} ';

JSON object:

var str2 = {"Name": "Deluyi", "Sex": "Man"};

It is easy to understand:

JSON objects are formats that can be manipulated directly using jquery, such as the ability to point out properties (methods) in C # with objects (class names).

The JSON string is just a string, a whole, without intercepting the data stored in it, can not be used directly, unless you only want to alert () him;

One, the AJAX request

1. Load (URL, [data], [callback])

    Overview: Load the remote HTML file code and insert it into the specified DOM node.

    Parameters: url: HTML page URL to be loaded.

   Data: Key/value that is sent to the server. You can also accept a string in jquery 1.3.

Callback: The callback function when loading succeeds.

   You can pass in only one parameter, representing the loading of a static HTML code fragment.

$ ("#div1"). Load ("load.html");

 2, $.ajax (): jquery is the bottom of the AJAX function, parameters receive a large object. The properties and methods inside the object that represent the relevant settings for the AJAX request:

(1) URL: The path to the request remote file

    (2) Type of Type:ajax request, optional value get/post

(3) Data: Object format. Sends an object to the background that represents the data being passed.

Commonly used with type "POST" request method, if the type is "get", can be used directly? Appended at the back of the URL.

(4) DataType: What type of data is expected to be returned in the background.

"Text"-string "JSON"-json object

(5) Success: callback function for successful request. The parameter accepts a data that represents the returned information in the background.

(6) Error: callback function when request fails

(7) StatusCode: Accepts an object, the object's key-value pair is the status state code and the corresponding callback function, indicating that when the request status code is the corresponding number, the execution of the specific operation function.

     200-normal request succeeded 404-page Not found 500-server internal error.

$.ajax ({    URL: "http://localhost/json.php?name= ' Zhangsan '&age=12",    type: "POST",    data: {        Name: "John Doe",        age:28        },    DataType: "JSON",    success:function (data) {    //jquery) JSON string into JSON object C12/>var jsons = $.parsejson (data);        Console.log (jsons);    },    error:function () {        alert ("Request failed! ")    ,    statuscode:{        " 404 ": Function () {            alert (" 404 means the page is not found ")        ,        " $ ": function () {            alert ("500 for server Internal error")        ,        "$": function () {            alert ("200 indicates success of request")      ;}});

3, $.get (); $.post (); These two functions are encapsulated on the basis of $.ajax (). You can send a GET request or POST request directly by default;

    Accepts four parameters:

The URL path of the ① request. Equivalent to the URL inside the $.ajax ();
② the data passed to the background. Equivalent to the data within the $.ajax ();
③ the callback function for which the request succeeded. Equivalent to $.ajax () inside the success;
④ The data type expected to be returned. Equivalent to $.ajax () inside the datatype;

$.post ("http://localhost/json.php", {data: "AAA"},function (data) {            console.log (data);        }, "json");

 4, $.getjson request JSON object's data in the way of Get

$.getjson ("http://localhost/json.php", {data: "AAA"},function (data) {            console.log (data);        });

 5, $.parsejson (str) convert JSON string to JSON object

   Standard JSON string, the key must be wrapped in double quotes.

var str = ' {' Age ': ' n} ' var obj = $.parsejson (str); Console.log (obj);

6. Trim () to remove whitespace from both ends of the string

var str1 = "   123    "; Console.log (Str1.trim ());

7. User traversal of arrays and objects

When iterating through an array, the first parameter of the function is the subscript, and the second parameter is the value;

When iterating over an object, the first argument of the function is the key, and the second argument is the value

var arr = [1,2,3,4,5,6,7];var obj = {    name: ' Zhangsan ',    age:12,    sex: ' Nan '}$.each (obj,function (Index,item) {    Console.log (index);    Console.log (item);});

Second, Ajax events

Various listening events for Ajax:

Ajaxstart--→ajaxsend--→ajaxsuccess/ajaxerror/ajaxcomplete--→ajaxstop

$ (document). Ajaxsend (function () {    alert ("Ajax request Sent");}); $ (document). Ajaxstop (function () {    alert ("Ajax request Stop");}) $ (document). Ajaxstart (function () {    alert ("Ajax request Start");}) $ (document). Ajaxsuccess (function () {    alert ("Ajax request succeeded");}) $ (document). Ajaxerror (function () {    alert ("Ajax request Failed");}) $ (document). Ajaxcomplete (function () {    alert ("The AJAX request is completed (regardless of successful failure, will that begging out)");})

Console access jquery--------JSON

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.