Ajax asynchronous request JSON data (graphics and text) _ajax related

The previous article on the AJAX request data text type, text and HTML are processing a relatively simple data, and in the programming process using AJAX call data, it is inevitable to do logical processing, the accepted data also become complex such as array type of data, This is the time to use the JSON data type for processing, so today we'll talk about some of the details of the JSON data request process:

Cloud Habitat Community Friendship remind this article the required tools and raw materials as follows:

Wamp or lamp environment, jquery.js, editor

Specific methods/steps please see below:

1. Create basic file Structure json_ajax.html and json_ajax.php, download Jquery.js, as shown in figure:

2. Coding of json_ajax.html and json_ajax.php files, as shown separately:

3. Run json_ajax.html and json_ajax.php in the W (l) AMP Environment, and run the results as shown:

The results of this operation should be normal, no difficulty in understanding, continue to look down, if there is confusion, there is no need to continue to read the necessary.

4. After the source code and the results of the analysis, know that in the Json_ajax.html set the button click event, click the button, the normal results of the operation of the following figure;

If you don't have a normal display, refer to my jquery Ajax debugging

5. Analysis of the results of the 4th step:

Console.log (data) directly returns the result of the json_ajax.php return, which is the JSON string;

Console.log (eval (' [' +data+ ']) to convert the JSON string returned by json_ajax.php to an object.

The ' object ' inside PHP is different from the process, but in JS, all the data is an object, perhaps now a little understand, why to convert the JSON string to objects, in JS processing objects more convenient, just like in PHP processing data, the first thought is the array.

6. Summary of Details:

1.php returns must be JSON, that is, the data needs to be processed with Json_encode ();

2.ajax after receiving the data, eval () processing is required, inside ' [' +data+ '] ' can be used ' (' +data+ ');

3.console.log () can be replaced with alert ();

4. This is mainly the process of thinking, once received data, you can according to the need for logical processing.

The above through an illustrated way to show you the AJAX asynchronous request JSON data, I hope you like.