Frontend learning-post json data packets using Ajax

0. preface this article explains how to use ajax in Jquery to transmit JSON data packets and POST (of course, PUT is sometimes a good choice ). The post json data packet is more readable and hierarchical than the standard POST format. To illustrate the problem, the frontend and backend are relatively simple, focusing on AJAX applications. Frontend terminal certificate --add-post-json.html
Figure 1 add page backend -- add-post-json.php

<? Php // return the header in JSON format ('content-Type: application/json; charset = UTF-8 '); $ result = array (); // obtain the original input content $ json = file_get_contents ("php: // input"); // var_dump ($ input_str ); // convert JSON to PHP Object $ obj = json_decode ($ json); $ a = $ obj-> a; // var_dump ($ ); $ B = $ obj-> B; // var_dump ($ B); $ result ["result"] = $ a + $ B; echo json_encode ($ result, JSON_NUMERIC_CHECK);?>

[Code repository] -- test-jquery-ajax code repository is located in bitbucket using Hg (instead of Git). Hg has a good GUI tool on windows or ubuntu -- TortoiseHg, I am stupid and cannot master Git. [TortoiseHg instructions] -- if you have never used Hg, refer to the hg clone operation section in blog. [JQuery Chinese API] [related blog] [front-end learning-JQuery Ajax experience]
1. post json data packets

Var submit_sync = function () {$. ajax ({type: "post", url: 'add-post-json.php ', async: false, // use the synchronous method // 1 needs to use JSON. stringify otherwise the format is a = 2 & B = 3 & now = 14... // 2 requires forced type conversion. Otherwise, the format is {"a": "2", "B": "3"} data: JSON. stringify ({a: parseInt ($ ('input [name = "a"] '). val (), B: parseInt ($ ('input [name = "B"] '). val (), now: new Date (). getTime () // do not add a comma to this line}), contentType: "application/json; charset = UTF-8", dataType: "json", success: function (data) {$ ('# result '). text (data. result);} // do not add a comma in this line });}

[HTTP request content] POST/test-jquery-ajax/add-post-json.php HTTP/1.1
Host: 192.168.1.104
Connection: keep-alive
Content-Length: 35
Accept: application/json, text/javascript, */*; q = 0.01
X-Requested-With: XMLHttpRequest
Content-Type: application/json; charset = UTF-8

{"A": 12, "B": 34, "now": 1403525674676}
[HTTP response content] HTTP/1.1 200 OKContent-Length: 13Content-Type: application/json; charset = UTF-8 {"result": 46}
2. Important: [1] Use JSON. stringify. Otherwise, the HTTP request is a = 12 & B = 34. The following statement cannot achieve the effect of post json data packets, which is a standard POST format.

Data: {a: parseInt ($ ('input [name = "a"] '). val (), B: parseInt ($ ('input [name = "B"] '). val (), now: new Date (). getTime () // do not add a comma in this line },

[HTTP request content] POST/test-jquery-ajax/add-post-json.php HTTP/1.1
Host: 192.168.1.104
Content-Length: 27
X-Requested-With: XMLHttpRequest
Content-Type: application/json; charset = UTF-8

A = 12 & B = 34 & now = 1403525989275.
[2] parseInt () must be forcibly converted to the type. Otherwise, the HTTP request is {"a": "12", "B": "34"} and the following code cannot achieve the expected results.

Data: JSON. stringify ({a: $ ('input [name = "a"] '). val (), B: $ ('input [name = "B"] '). val (), now: new Date (). getTime () // do not add a comma to this line }),

[HTTP request content] POST/test-jquery-ajax/add-post-json.php HTTP/1.1
Host: 192.168.1.104
Content-Length: 39
X-Requested-With: XMLHttpRequest
Content-Type: application/json; charset = UTF-8

{"A": "12", "B": "34", "now": 1403526427890}
[3] IE8 compatibility. IE7 and IE6 do not support JSON. stringify. Use it with caution.