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
    【相关博文】

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 

{"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

【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}

【3】
IE8兼容,IE7和IE6不支持JSON.stringify,使用请谨慎。

前端学习——使用Ajax方式POST JSON数据包的更多相关文章

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

    add by zhj: 用ajax发送json数据时注意两点, 第一,使用JSON.stringify()函数将data转为json格式的字符串,如下 data: JSON.stringify({   ...

  2. django 使用Ajax方式POST JSON数据包

    示例1: js: function SaveAction(){ //点击 保存按键 var senddata = {"type":"A", "host ...

  3. 前端ajax用post方式提交json数据给后端时,网络报错 415

    项目框架:spring+springmvc+mybatis 问题描述:前端ajax用post方式提交json数据给后端时,网络报错 415 前端异常信息:Failed to load resource ...

  4. AJAX如何接收JSON数据

    简介 在我们了解如何使用AJAX返回JSON数据的时候要先明白下列几点 1. JSON如何来表示对象的 2. JSON如何来表示数组的 var object = { "labId" ...

  5. 前端学习——JQuery Ajax使用经验

    0.前言     在项目推进过程中常常使用Ajax,通过Jquery提供的函数能够很方便的使用Ajax,可是在实际使用中也遇到一些问题,比如怎样防止浏览器使用缓存,怎样使用同步方式等.通过博文整理总结 ...

  6. 使用@RequestBody注解获取Ajax提交的json数据

    最近在学习有关springMVC的知识,今天学习如何使用@RequestBody注解来获取Ajax提交的json数据内容. Ajax部分代码如下: 1 $(function(){ 2 $(" ...

  7. J2EE Web开发入门—通过action是以传统方式返回JSON数据

    关键字:maven.m2eclipse.JSON.Struts2.Log4j2.tomcat.jdk7.Config Browser Plugin Created by Bob 20131031 l ...

  8. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  9. jquery通过ajax方法获取json数据不执行success回调

    问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...

随机推荐

  1. [python学习篇][廖雪峰][4]函数--reduce

    reduce的用法.reduce把一个函数作用在一个序列[x1, x2, x3...]上,这个函数必须接收两个参数,reduce把结果继续和序列的下一个元素做累积计算,其效果就是: reduce(f, ...

  2. [python学习篇][廖雪峰][1]高级特性--创建生成器 方法1 a = (x for x in range(1,3))

    创建一个生成器的方法: for x in range(1,10000000) ,先生成一个列表[1........9999999] 如果我们只想要后面的几个元素,会发现浪费很多空间.所以,如果列表元素 ...

  3. 九度oj 题目1458:汉诺塔III

    题目描述: 约19世纪末,在欧州的商店中出售一种智力玩具,在一块铜板上有三根杆,最左边的杆上自上而下.由小到大顺序串着由64个圆盘构成的塔.目的是将最左边杆上的盘全部移到右边的杆上,条件是一次只能移动 ...

  4. 【bzoj2085】[Poi2010]Hamsters Hash+倍增Floyd

    题目描述 Tz养了一群仓鼠,他们都有英文小写的名字,现在Tz想用一个字母序列来表示他们的名字,只要他们的名字是字母序列中的一个子串就算,出现多次可以重复计算.现在Tz想好了要出现多少个名字,请你求出最 ...

  5. 【bzoj2625】[Neerc2009]Inspection 有上下界最小流

    题目描述 You are in charge of a team that inspects a new ski resort. A ski resort is situated on several ...

  6. Python Base Two

    //fourth day to study python 24. In python , how to create funcation. we can use def to define funca ...

  7. Android2.2源码属性服务分析

    属性服务property service 大家都知道,在windows中有个注册表,里面存储的是一些键值对.注册表的作用就是:系统或者应用程序将自己的一些属性存储在注册表中,即使系统或应用程序重启,它 ...

  8. poj Pseudoprime numbers 3641

    Pseudoprime numbers Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10903   Accepted: 4 ...

  9. P1473 校门外的树3

    时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述  校门外有很多树,有苹果树,香蕉树,有会扔石头的,有可以吃掉补充体力的……如今学校决定在某个时刻在某一段种上一 ...

  10. 洛谷 P 1133 教主的花园

    题目描述 教主有着一个环形的花园,他想在花园周围均匀地种上n棵树,但是教主花园的土壤很特别,每个位置适合种的树都不一样,一些树可能会因为不适合这个位置的土壤而损失观赏价值. 教主最喜欢3种树,这3种树 ...