首页 > 代码库 > 前端学习——使用Ajax方式POST JSON数据包
前端学习——使用Ajax方式POST JSON数据包
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部分操作就可以。
【JQuery 中文API】
【相关博文】
【前端学习——JQuery Ajax使用经验】
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 否则HTTP请求为a=12&b=34。
下面写法并不能达到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方式POST JSON数据包
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。