使用Ajax方式POST JSON数据包（转）

add by zhj: 用ajax发送json数据时注意两点，

第一，使用JSON.stringify()函数将data转为json格式的字符串，如下

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"

（注：$.ajax中的参数dataType相当于accept header)

原文：http://blog.csdn.net/xukai871105/article/details/33800935

0.前言

    本文解释如何使用Jquery中的ajax方法传递JSON数据包，传递的方法使用POST（当然PUT又有时也是一个不错的选择）。POST JSON数据包相比标准的POST格式可读性更好些，层次结构也更清晰。

    为了说明问题，前端和后端较为简单，重点突出AJAX的应用。

 

    【前端】——add-post-json.html

图1 add页面

【后端】——add-post-json.php

1. <?php
2. // 返回JSON格式
3. header('Content-Type:application/json;charset=utf-8');
4. $result = array();
5. // 获得原始输入内容
6. $json = file_get_contents("php://input");
7. //var_dump($input_str);
8. // JSON转换为PHP对象
9. $obj = json_decode($json);
10. $a = $obj->a; // var_dump($a);
11. $b = $obj->b; // var_dump($b);
12. $result["result"] = $a + $b;
13. echo json_encode($result, JSON_NUMERIC_CHECK);
14. ?>

 

    【代码仓库】——test-jquery-ajax

代码仓库位于bitbucket使用Hg(而不是Git)，Hg在windows或ubuntu上均有很好用的GUI工具——TortoiseHg，本人愚笨没能熟练掌握Git。

    【TortoiseHg使用说明】——如果没有使用过Hg请参考博文hg clone部分操作即可。   

    【JQuery 中文API】

    【相关博文】

    【前端学习——JQuery Ajax使用经验】

 

1.POST JSON数据包

1. var submit_sync = function() {
2. $.ajax({
3. type: "post",
4. url: 'add-post-json.php',
5. async: false, // 使用同步方式
6. // 1 需要使用JSON.stringify 否则格式为 a=2&b=3&now=14...
7. // 2 需要强制类型转换，否则格式为 {"a":"2","b":"3"}
8. data: JSON.stringify({
9. a: parseInt($('input[name="a"]').val()),
10. b: parseInt($('input[name="b"]').val()),
11. now: new Date().getTime() // 注意不要在此行增加逗号
12. }),
13. contentType: "application/json; charset=utf-8",
14. dataType: "json",
15. success: function(data) {
16. $('#result').text(data.result);
17. } // 注意不要在此行增加逗号
18. });
19. }

 

【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，它将js的数据类型转为json格式的字符串: '{"a":12,"b":34,"now":1403525674676}'

如果不用JSON.stringify，那POST消息体是普通的字符串: 'a=12&b=34&now=1403525674676'

以下写法并不能达到POST JSON数据包的效果，这是标准的POST格式。

1. data: {
2. a: parseInt($('input[name="a"]').val()),
3. b: parseInt($('input[name="b"]').val()),
4. now: new Date().getTime() // 注意不要在此行增加逗号
5. },

【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"}

以下代码并不能达到预期效果

1. data: JSON.stringify({
2. a: $('input[name="a"]').val(),
3. b: $('input[name="b"]').val(),
4. now: new Date().getTime() // 注意不要在此行增加逗号
5. }),

【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，使用请慎重。