使用Ajax方式POST JSON数据包(转)

时间:2024-02-22 13:57:02
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)
0.前言
    本文解释如何使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择)。POST JSON数据包相比标准的POST格式可读性更好些,层次结构也更清晰。
    为了说明问题,前端和后端较为简单,重点突出AJAX的应用。
 
    【前端】——add-post-json.html
图1 add页面
    【后端】——add-post-json.php
[php] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <?php  
  2. // 返回JSON格式  
  3. header(\'Content-Type:application/json;charset=utf-8\');  
  4. $result = array();  
  5.   
  6. // 获得原始输入内容  
  7. $json = file_get_contents("php://input");  
  8. //var_dump($input_str);  
  9.   
  10. // JSON转换为PHP对象  
  11. $obj = json_decode($json);  
  12.   
  13. $a = $obj->a; // var_dump($a);  
  14. $b = $obj->b; // var_dump($b);  
  15.   
  16. $result["result"] = $a + $b;  
  17. echo json_encode($result, JSON_NUMERIC_CHECK);  
  18. ?>  
 
    【代码仓库】——test-jquery-ajax
     代码仓库位于bitbucket使用Hg(而不是Git),Hg在windows或ubuntu上均有很好用的GUI工具——TortoiseHg,本人愚笨没能熟练掌握Git。
    【TortoiseHg使用说明】——如果没有使用过Hg请参考博文hg clone部分操作即可。   
    【JQuery 中文API
    【相关博文】
 
1.POST JSON数据包
[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  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格式。
[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  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"}
以下代码并不能达到预期效果
[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  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,使用请慎重。