0.前言
本文解释如何使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择)。POST JSON数据包相比标准的POST格式可读性更好些,层次结构也更清晰。
为了说明问题,前端和后端较为简单,重点突出AJAX的应用。
【前端】——add-post-json.html
【后端】——add-post-json.php
<?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);
?>
【TortoiseHg使用说明】——如果没有使用过Hg请参考文章hg clone部分操作即可。
【相关文章】
1.POST JSON数据包
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);
} // 注意不要在此行增加逗号
});
}
【HTTP请求部分内容】
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响应部分内容】
HTTP/1.1 200 OK
Content-Length: 13
Content-Type: application/json;charset=utf-8
{"result":46}
2.重要说明
【1】
需要使用 JSON.stringify 否则HTTP请求为a=12&b=34。
以下写法并不能达到POST JSON数据包的效果,这是标准的POST格式。
data: {
a: parseInt($('input[name="a"]').val()),
b: parseInt($('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: 27
X-Requested-With: XMLHttpRequest
Content-Type: application/json; charset=UTF-8
a=12&b=34&now=1403525989275
【2】
需要强制类型转换 parseInt(),否则HTTP请求为 {"a":"12","b":"34"}
以下代码并不能达到预期效果
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
{"a": "12" ,"b": "34" ,"now":1403526427890}
【3】
IE8兼容,IE7和IE6 不支持JSON.stringify,使用请慎重。