前端学习——使用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)
0.前言
    本文解释如何使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择)。POST JSON数据包相比标准的POST格式可读性更好些,层次结构也更清晰。
    为了说明问题,前端和后端较为简单,重点突出AJAX的应用。
    【前端】——add-post-json.html
前端学习——使用Ajax方式POST JSON数据包(转)

图1 add页面

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

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

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

    【TortoiseHg使用说明】——如果没有使用过Hg请参考博文hg clone部分操作即可。
    【JQuery 中文API
    【相关博文】
1.POST JSON数据包

【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格式。

【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"}
以下代码并不能达到预期效果

【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,使用请慎重。
  • 我的微信
  • 我的微信扫一扫
  • weinxin
  • 我的QQ
  • 我的QQ扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: