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

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

耍酷的啄木鸟 · Imports - Post Import ...· 4 周前 ·

个性的茄子 · UnityWebRequest如何发送Jso ...· 3 周前 ·

阳刚的火腿肠 · 使用 Postman 发送 JSON ...· 3 周前 ·

行走的酱肘子 · requests(一): ...· 3 周前 ·

读研的冲锋衣 · Apifox 如何发送 json 格式的 ...· 3 周前 ·

爱笑的葫芦 · How to Get Distinct ...· 6 月前 ·

腼腆的柠檬 · 关于海南省2020年国民经济和社会发展计划执 ...· 9 月前 ·

愤怒的菠菜 · 橘家床墊｜好睡就是這麼簡單～優質國產床墊專賣店· 10 月前 ·

欢乐的枇杷 · 萌宠训练师兑换码是多少最新兑换码大全-琵琶网· 10 月前 ·

腹黑的企鹅 · MQTT客户端（c#) - 天明宝 - 博客园· 1 年前 ·

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

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

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

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

图1 add页面

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

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

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

【 JQuery 中文API 】

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.重要说明

需要使用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

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

需要强制类型转换parseInt()，否则HTTP请求为 {"a":"12","b":"34"}

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

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}

IE8兼容，IE7和IE6不支持JSON.stringify，使用请慎重。