使用Ajax方式POST JSON数据包(转)
2023-09-14 08:58:45 时间
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
- // 返回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);
- ?>
【代码仓库】——test-jquery-ajax
代码仓库位于bitbucket使用Hg(而不是Git),Hg在windows或ubuntu上均有很好用的GUI工具——TortoiseHg,本人愚笨没能熟练掌握Git。
【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
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格式。
- 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
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}
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,使用请慎重。
相关文章
- Ajax技术使用之ajax与模态框结合的妙用
- PHP读取目录下所有文件,并通过ajax返回json格式的数据
- 实例解析java + jQuery + json工作过程(获取JSON数据)
- Jmeter入门15 JSON Assertion 适用于json格式的响应断言
- bjui的ajax form不使用validate的表单验证
- Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()
- Jquery.ajax报parseerror Invalid JSON错误的原因和解决方法:不能解析
- form组件和ajax实现的注册
- 在JavaScript中使用json.js:Ajax项目之GET请求(同步)
- PHP+ajax实现二级联动【post+json方式】
- jquery+json的6种ajax请求
- 在SAP WebClient UI里使用AJAX进行异步数据读取
- Json string to object debug - json字符串转Java对象的处理调试
- 前后端交互模式大总结 艾提拉 总结 attilax总结 目录 1. 通过ajax ajax就是js的网络api 完全解耦合 推荐1 1.1. Query Ajax 操作函数1 1.2. 服务
- atitit.ajax 最佳实践跟框架选型 o99
- IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取
- php下的原生ajax请求
- Ajax的get与post的区别,什么时候使用post?
- AJAX应用和传统Web应用有什么不同
- Android JSON解析json数据
- Jquery ajax json 不执行success的原因 坑爹
- spring boot + spring security +前后端分离【跨域】配置 + ajax的json传输数据
- Django 之Ajax&Json&CORS&同源策略&Jsonp用法
- Struts2之—集成Json插件实现Ajax
- jQuery ajax读取本地json文件_jQuery请求本地JSON文件,在谷歌浏览器运行时报跨域错误_Vscode使用Live Server