本文解释如何使用Jquery中的ajax方法传递JSON数据包，传递的方法使用POST（当然PUT又有时也是一个不错的选择）。POST JSON数据包相比标准的POST格式可读性更好些，层次结构也更清晰。
为了说明问题，前端和后端较为简单，重点突出AJAX的应用。
图1 add页面
【后端】——add-post-json.PHP@H_301_4@@H_301_4@
@H_301_4@@H_301_4@
<?PHP // 返回JSON格式 header('Content-Type:application/json;charset=utf-8'); $result = array(); // 获得原始输入内容 $json = file_get_contents("PHP://input"); //var_dump($input_str); // JSON转换为PHP对象 $obj = json_decode($json); $a = $obj->a; // var_dump($a); $b = $obj->b; // var_dump($b); $result["result"] = $a + $b; echo json_encode($result,JSON_NUMERIC_CHECK); ?>
【代码仓库】——
test-jquery-ajax
代码仓库位于bitbucket使用Hg(而不是Git)，Hg在windows或ubuntu上均有很好用的GUI工具——TortoiseHg，本人愚笨没能熟练掌握Git。
【
TortoiseHg使用说明】——如果没有使用过Hg请参考博文hg clone部分操作即可。
【
JQuery 中文API】
【相关博文】
var submit_sync = function() {
$.ajax({
type: "post",url: 'add-post-json.PHP',async: false,// 使用同步方式
// 1 需要使用JSON.stringify 否则格式为 a=2&b=3&now=14...
// 2 需要强制类型转换，否则格式为 {"a":"2","b":"3"}
data: JSON.stringify({
a: parseInt($('input[name="a"]').val()),b: parseInt($('input[name="b"]').val()),now: new Date().getTime() // 注意不要在此行增加逗号
}),contentType: "application/json; charset=utf-8",dataType: "json",success: function(data) {
$('#result').text(data.result);
} // 注意不要在此行增加逗号
});
}
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
@H_301_4@
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
@H_301_4@
@H_301_4@
HTTP/1.1 200 OK@H_301_4@
Content-Length: 13@H_301_4@
Content-Type: application/json;charset=utf-8@H_301_4@
@H_301_4@
{"result":46}@H_301_4@
以下写法并不能达到POST JSON数据包的效果，这是标准的POST格式。
@H_301_160@data: {
a: parseInt($('input[name="a"]').val()),now: new Date().getTime() // 注意不要在此行增加逗号
},
【HTTP请求部分内容】
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@H_301_4@
a=12&b=34&now=1403525989275@H_301_4@@H_301_4@
Host: 192.168.1.104
Content-Length: 27
X-Requested-With: XMLHttpRequest
Content-Type: application/json; charset=UTF-8@H_301_4@
a=12&b=34&now=1403525989275@H_301_4@@H_301_4@
data: JSON.stringify({
a: $('input[name="a"]').val(),b: $('input[name="b"]').val(),now: new Date().getTime() // 注意不要在此行增加逗号
}),
【HTTP请求部分内容】
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@H_301_4@
{"a":@H_301_4@ "12"@H_301_4@ ,"b":@H_301_4@ "34"@H_301_4@ ,"now":1403526427890}@H_301_4@
Host: 192.168.1.104
Content-Length: 39
X-Requested-With: XMLHttpRequest
Content-Type: application/json; charset=UTF-8@H_301_4@
{"a":@H_301_4@ "12"@H_301_4@ ,"b":@H_301_4@ "34"@H_301_4@ ,"now":1403526427890}@H_301_4@
