使用 JSON 进行数据传输
此内容是该系列 # 部分中的第 # 部分： 掌握 Ajax，第 10 部分/developerworks/cn/web/wa-ajaxintro/敬请期待该系列的后续内容。此内容是该系列的一部分：掌握 Ajax，第 10 部分敬请期待该系列的后续内容。
如果您阅读了本系列前面的文章，那么应已对数据格式有了相当的认识。前面的文章解释了在许多异步应用程序中如何恰当地使用纯文本和简单的名称 / 值对。可以将数据组合成下面这样的形式： firstName=Brett&lastName=McLaughlin&email=这样就行了，不需要再做什么了。实际上，Web 老手会意识到通过 GET 请求发送的信息就是采用这种格式。然后，本系列讨论了 XML。显然，XML 得到了相当多的关注（正面和负面的评价都有），已经在 Ajax 应用程序中广泛使用。关于如何使用 XML 数据格式，可以回顾 ： &request&
&firstName&Brett&/firstName&
&lastName&McLaughlin&/lastName&
&email&&/email&
&/request&这里的数据与前面看到的相同，但是这一次采用 XML 格式。这没什么了不起的；这只是另一种数据格式，使我们能够使用 XML 而不是纯文本和名称 / 值对。本文讨论另一种数据格式，JavaScript Object Notation（JSON）。JSON 看起来既熟悉又陌生。它提供了另一种选择，选择范围更大总是好事情。选择的意义在深入研究 JSON 格式的细节之前，您应该了解为什么要用两篇文章讨论另一种数据格式（是的，本系列中的下一篇文章也讨论 JSON），尤其在已经了解了如何使用 XML 和纯文本的名称 / 值对的情况下。其实，原因很简单：解决任何问题的选择越多，找到问题的 最佳解决方案的可能性就越大，这比只能使用 一个解决方案要好得多。回顾名称 / 值对和 XML本系列已经用了大量篇幅讨论适合使用名称 / 值对和 XML 的场合。总是应该首先考虑使用名称 / 值对。对于大多数异步应用程序中的问题，使用名称 / 值对几乎总是最简单的解决方案，而且它只需要非常基本的 JavaScript 知识。实际上，除非有某种限制迫使您转向 XML，否则用不着考虑使用别的数据格式。显然，如果要向需要 XML 格式的输入的服务器端程序发送数据，那么希望使用 XML 作为数据格式。但是，在大多数情况下，对于需要向应用程序发送多段信息的服务器，XML 是更好的选择；换句话说，XML 通常更适合用来 向Ajax 应用程序做出响应，而不是 从Ajax 应用程序发出请求。添加 JSON在使用名称 / 值对或 XML 时，实际上是使用 JavaScript 从应用程序中取得数据并将数据转换成另一种数据格式。在这些情况下，JavaScript 在很大程度上作为一种数据操纵语言，用来移动和操纵来自 Web 表单的数据，并将数据转换为一种适合发送给服务器端程序的格式。但是，有时候 JavaScript 不仅仅作为格式化语言使用。在这些情况下，实际上使用 JavaScript 语言中的对象来表示数据，而不仅是将来自 Web 表单的数据放进请求中。在这些情况下，从 JavaScript 对象中提取数据，然后再将数据放进名称 / 值对或 XML，就有点儿 多此一举了。这时就合适使用 JSON：JSON 允许轻松地将 JavaScript 对象转换成可以随请求发送的数据（同步或异步都可以）。JSON 并不是某种魔弹；但是，它对于某些非常特殊的情况是很好的选择。不要认为您不会遇到这些情况。阅读本文和下一篇文章来了解 JSON，这样，遇到这类问题时您就知道该怎么办了。JSON 基础简单地说，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪（稍后会看到几个示例），但是 JavaScript 很容易解释它，而且 JSON 可以表示比名称 / 值对更复杂的结构。例如，可以表示数组和复杂的对象，而不仅仅是键和值的简单列表。简单 JSON 示例按照最简单的形式，可以用下面这样的 JSON 表示名称 / 值对： { "firstName": "Brett" }这个示例非常基本，而且实际上比等效的纯文本名称 / 值对占用更多的空间： firstName=Brett但是，当将多个名称 / 值对串在一起时，JSON 就会体现出它的价值了。首先，可以创建包含多个名称 / 值对的 记录，比如： { "firstName": "Brett", "lastName":"McLaughlin", "email": "" }从语法方面来看，这与名称 / 值对相比并没有很大的优势，但是在这种情况下 JSON 更容易使用，而且可读性更好。例如，它明确地表示以上三个值都是同一记录的一部分；花括号使这些值有了某种联系。值的数组当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性。例如，假设您希望表示一个人名列表。在 XML 中，需要许多开始标记和结束标记；如果使用典型的名称 / 值对（就像在本系列前面文章中看到的那种名称 / 值对），那么必须建立一种专有的数据格式，或者将键名称修改为 person1-firstName这样的形式。如果使用 JSON，就只需将多个带花括号的记录分组在一起： { "people": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "" }
]}这不难理解。在这个示例中，只有一个名为 people的变量，值是包含三个条目的数组，每个条目是一个人的记录，其中包含名、姓和电子邮件地址。上面的示例演示如何用括号将记录组合成一个值。当然，可以使用相同的语法表示多个值（每个值包含多个记录）： { "programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "" }
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
}这里最值得注意的是，能够表示多个值，每个值进而包含多个值。但是还应该注意，在不同的主条目（programmers、authors 和 musicians）之间，记录中实际的名称 / 值对可以不一样。JSON 是完全动态的，允许在 JSON 结构的中间改变表示数据的方式。在处理 JSON 格式的数据时，没有需要遵守的预定义的约束。所以，在同样的数据结构中，可以改变表示数据的方式，甚至可以以不同方式表示同一事物。在 JavaScript 中使用 JSON掌握了 JSON 格式之后，在 JavaScript 中使用它就很简单了。JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。将 JSON 数据赋值给变量例如，可以创建一个新的 JavaScript 变量，然后将 JSON 格式的数据字符串直接赋值给它： var people =
{ "programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "" }
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
}这非常简单；现在 people包含前面看到的 JSON 格式的数据。但是，这还不够，因为访问数据的方式似乎还不明显。访问数据尽管看起来不明显，但是上面的长字符串实际上只是一个数组；将这个数组放进 JavaScript 变量之后，就可以很轻松地访问它。实际上，只需用点号表示法来表示数组元素。所以，要想访问 programmers 列表的第一个条目的姓氏，只需在 JavaScript 中使用下面这样的代码： people.programmers[0].lastN注意，数组索引是从零开始的。所以，这行代码首先访问 people变量中的数据；然后移动到称为 programmers的条目，再移动到第一个记录（[0]）；最后，访问 lastName键的值。结果是字符串值 “McLaughlin”。下面是使用同一变量的几个示例。 people.authors[1].genre
// Value is "fantasy"
people.musicians[3].lastName
// Undefined. This refers to the fourth entry,
and there isn't one
people.programmers.[2].firstName
// Value is "Elliotte"利用这样的语法，可以处理任何 JSON 格式的数据，而不需要使用任何额外的 JavaScript 工具包或 API。修改 JSON 数据正如可以用点号和括号访问数据，也可以按照同样的方式轻松地修改数据： people.musicians[1].lastName = "Rachmaninov";在将字符串转换为 JavaScript 对象之后，就可以像这样修改变量中的数据。转换回字符串当然，如果不能轻松地将对象转换回本文提到的文本格式，那么所有数据修改都没有太大的价值。在 JavaScript 中这种转换也很简单： String newJSONtext = people.toJSONString();这样就行了！现在就获得了一个可以在任何地方使用的文本字符串，例如，可以将它用作 Ajax 应用程序中的请求字符串。更重要的是，可以将 任何JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject的对象进行转换，只需执行相同形式的命令： String myObjectInJSON = myObject.toJSONString();这就是 JSON 与本系列讨论的其他数据格式之间最大的差异。如果使用 JSON，只需调用一个简单的函数，就可以获得经过格式化的数据，可以直接使用了。对于其他数据格式，需要在原始数据和格式化数据之间进行转换。即使使用 Document Object Model 这样的 API（提供了将自己的数据结构转换为文本的函数），也需要学习这个 API 并使用 API 的对象，而不是使用原生的 JavaScript 对象和语法。最终结论是，如果要处理大量 JavaScript 对象，那么 JSON 几乎肯定是一个好选择，这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。结束语本系列已经用大量时间讨论了数据格式，这主要是因为几乎所有异步应用程序最终都要处理数据。如果掌握了发送和接收所有类型的数据的各种工具和技术，并按照最适合每种数据类型的方式使用它们，那么就能够更精通 Ajax。在掌握 XML 和纯文本的基础上，再掌握 JSON，这样就能够在 JavaScript 中处理更复杂的数据结构。本系列中的下一篇文章将讨论发送数据以外的问题，深入介绍服务器端程序如何接收和处理 JSON 格式的数据。还要讨论服务器端程序如何跨脚本和服务器端组件以 JSON 格式发送回数据，这样就可以将 XML、纯文本和 JSON 请求和响应混合在一起。这可以提供很大的灵活性，可以按照几乎任何组合结合使用所有这些工具。
相关主题您可以参阅本文在 developerWorks 全球站点上的 。：阅读本系列以前的文章。：访问 JSON Web 站点来进一步了解这种数据格式，包括到几种 JSON API 实现的链接。有许多 developerWorks 文章讨论了更高级的 JSON 主题：
“”（Senthil Nathan、Edward J. Pring 和 John Morar，2007 年 1 月）“”（Bakul L. Patel，2006 年 10 月）“”（Jack D. Herrington，2006 年 9 月）：在 developerWorks XML 专区了解 XML 的所有方面。：了解关于 XML 的所有方面的好资源。
“”（Philip McCarthy，developerWorks，2005 年 9 月）：从 Java 的角度看看服务器端的 Ajax。“”（Philip McCarthy，developerWorks，2005 年 10 月）：从 Java 的角度研究如何通过网络发送对象并与 Ajax 进行交互。“”（James Snell，developerWorks，2005 年 10 月）：这是一篇相当高级的文章，它介绍了将 Ajax 与现有的基于 SOAP 的 Web 服务相集成的有关内容。World Wide Web Consortium 上的 ：了解所有 DOM 相关技术的起点。：了解核心 Document Object Model 的定义，从可用类型和属性直到在各种语言中使用 DOM 的方法。：希望在代码中使用 DOM 的任何 JavaScript 程序员都应该阅读这个规范。“”（Jesse James Garrett，Adaptive Path，2005 年 2 月）：阅读这篇首创 Ajax 这个术语的文章。这是所有 Ajax 开发人员的必读文章。（Brett McLaughlin，O'Reilly Media，2006 年）：学习这篇文章中的思想，并将牢牢印入脑海：Head First 风格。（Brett McLaughlin，O'Reilly Media, Inc.，2001 年）：查看本文作者对 XHTML 和 XML 转换的讨论。（David Flanagan，O'Reilly Media, Inc.，2001 年）：深入探讨了处理 JavaScript 和动态 Web 页面的大量指导原则。即将推出的版本添加了关于 Ajax 的两章。（Elizabeth 与 Eric Freeman，O'Reilly Media, Inc.，2005 年）：了解关于标准化 HTML 和 XHTML 的更多内容，学习如何对 HTML 应用 CSS。
添加或订阅评论，请先或。
有新评论时提醒我
static.content.url=/developerworks/js/artrating/SITE_ID=10Zone=Web development, XML, Open sourceArticleID=208154ArticleTitle=掌握 Ajax，第 10 部分: 使用 JSON 进行数据传输publish-date=博客分类：
JSP页面表单数据通过Ajax,以json格式发送到后台处理，最后返回json对象，显示在页面上。
原意就打算了解一下json格式数据的传递，没打算做的多复杂，但乱码问题搞得我头都大了。
直接贴代码解释
$("#register").click(function(){
var userFormTemp = $("form").serialize();
var userFormDecode = decodeURIComponent(userFormTemp,true);
var userForm = encodeURI(encodeURI(userFormDecode));
type : "post",
url : "UserServlet",
contentType: "application/x-www-form- charset=UTF-8",
data : {user : userForm},
dataType : "json",
success : function(data){
$("#uname").text(data.userName);
$("#addr").text(data.address);
$("#pho").text(data.phone);
$("#hob").text(data.hobby);
error : function(textStatus,e){
alert(e.status);
相关行解释：
1.var userFormTemp = $("form").serialize();
学习Ajax时看到这个方法觉得有意思就拿来试验一下，serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。输出的格式为：name=value&name1=value1&name2=value2...
类似于路径后面的参数列表。get方式提交也可以直接加到路径后面传送。
ajax使用与寻常无异，就是数据类型改为json:dataType : "json"。
Form2Json文件
因为要使用json格式传递数据，后台先将序列化表单后的字符串转换成json格式的字符串然后再装换成json对象。
public class Form2Json {
public JSONObject string2Json(String stringForForm) throws Exception{
String form2Json[] = stringForForm.split("&");
String jsonForStringTemp = "";
for (int i=0;i&form2Json.i++){
int index = form2Json[i].indexOf("=");
jsonForStringTemp += "\""+form2Json[i].substring(0, index)+"\""
+":"+"\""+URLDecoder.decode(form2Json[i].substring(index+1,form2Json[i].length()),"UTF-8")+"\""+",";
String jsonForString = "{" + jsonForStringTemp +"}";
JSONObject jo = JSONObject.fromObject(jsonForString);
主要就是做些字符串的截取。
Servlet文件
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String s = request.getParameter("user");
s = URLDecoder.decode(s,"UTF-8");
Form2Json f2j = new Form2Json();
JSONObject jo =
jo = f2j.string2Json(s);
}catch(Exception ex){
ex.printStackTrace();
out.print(jo);
out.flush();
out.close();
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
&title&Json&/title&
&meta http-equiv="pragma" content="no-cache"&
&meta http-equiv="cache-control" content="no-cache"&
&script src="js/jquery-1.9.1.js"&&/script&
&script src="js/testJquery.js"&&/script&
&form id=""&
&table border="1" width="400" style="border-collapse:collapse"&
&colgroup&
&col width="150"&
&col width="250"&
&/colgroup&
&td&用户名：&/td&
&input type="text" name="userName" id="userName"&
&div id="userDiv" style="color:red"&*&/div&
&td&性别：&/td&
男&input type="radio" name="sex" id="male" value="male"&
女&input type="radio" name="sex" id="female" value="female"&
&td&密码：&/td&
&input type="password" name="pwd" id="pwd"&
&div id="pwdDiv" style="color:red"&*&/div&
&td&确认密码：&/td&
&input type="password" name="pwdA" id="pwdA"&
&div id="pwdADiv" style="color:red"&&/div&
&td&地址：&/td&
&input type="text" name="address" id="address"&
&div id="userDiv" style="color:red"&&/div&
&td&电话：&/td&
&input type="text" name="phone" id="phone"&
&div id="phoneDiv" style="color:red"&&/div&
&td&爱好：&/td&
音乐&input type="checkbox" name="hobby" id="music" value="音乐"&
游戏&input type="checkbox" name="hobby" id="game" value="游戏"&
读书&input type="checkbox" name="hobby" id="read" value="读书"&
&td colspan="2"&
&input type="button" id="register" value="注册"&
&input type="reset" value="清空"&
&div id="uname"&&/div&
&div id="addr"&&/div&
&div id="pho"&&/div&
&div id="hob"&&/div&
&/body&&/html&
serialize()中文乱码问题解决方法：
1.serialize主动调用了encodeURIComponent()方法进行了编码；；
2.所以得先调用decodeURIComponent()方法进行解码；
3.然后还得两次调用 encodeURI()方法进行编码；
4.后台调用URLDecoder.decode()方法解码；
5.本来应该大概经过上面四步就可以解决中文乱码问题，但不知道为什么，后台获取到的字符串中文还是乱码，(⊙﹏⊙b汗)，于是我就将截取到的字符串再做一次解码，然后...就没然后了。
本来还打算试一下serializeArray() 方法，但看到API里面介绍说serializeArray()返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。所以我就缓缓再看。
其实serializeArray()用法也差不多，因为它得到的是一个JSON对象，所以先得将他解析成字符串，现在较新的浏览器都提供了原生的JSON支持，JSON.stringify()，能将JSON对象解析成JSON格式的字符串。
[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" },{ "firstName":"Thomas" , "lastName":"Carter" }]
后台转换成JSON对象时必须拼接字符串类似格式为：
{“user”:
[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" },{ "firstName":"Thomas" , "lastName":"Carter" }]
好吧，我错了。上面注释的一段没用。
因为serializeArray()返回的Array&Object& 格式，后台字符串转换成JSON对象要用JSONArray.fromObject();
JSON字符串转换为JSON对象
1.eval("(" + value+ ")");
2.value.parseJSON();
3.JSON.parse(value);
JSON对象转化为JSON字符串。
1.obj.toJSONString();
2.JSON.stringify(obj);
。。。。。。
浏览: 4198 次
来自: 北京
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'14:59 提问
怎么在html文件中，通过js获取json数据并以表格形式输出
这是我的.jsp文件：
&%@ page language="java" contentType="text/ charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%&
&!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
&%@ taglib prefix="json" uri="/taglibs/json" %&
&%@ taglib uri="/jsp/jstl/sql" prefix="sql"%&
&%@ page import="java.io.*,java.util.*,java.sql.*"%&
&%@ page import="javax.servlet.http.*,javax.servlet.*" %&
&meta http-equiv="Content-Type" content="text/ charset=ISO-8859-1"&
&title&Insert title here&/title&
&sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost/login"
user="root"
password=""/&
&sql:query dataSource="${snapshot}" var="result"&
SELECT * from E
&/sql:query&
&json:array name="items" var="item" items="${result.rows}"&
&json:object&
&json:property name="id" value="${item.id}"/&
&json:property name="firstname" value="${item.first}"/&
&json:property name="lastname" value="${item.last}"/&
&json:property name="age" value="${item.age}"/&
&/json:object&
&/json:array&
怎么在html文件中，通过js将json数据获取并以表格形式输出
按赞数排序
----------------------biu~biu~biu~~~在下问答机器人小D，这是我依靠自己的聪明才智给出的答案，如果不正确，你来咬我啊！
如果是js获取数据，那么其实就是异步加载，
1服务端提供一个json数据的接口
2,页面通过ajax形式方式数据接口
3,根据返回值填入到表格中
博客地址：
下载地址：
里面有如何把json变成表格的demo，虽然主要功能是实现编辑表格
希望可以帮到你...
特别简单，通过从数据库查出来的list，然后后台转换为json，最后通过AJAX接受返回值json，绑定表格，下面是绑定表格的代码：
columns: [[
{ field: 'ck', checkbox: true, align: 'left', width: 10 },
{ field: 'StartDate', title: '开始日期', width: 181 },
{ field: 'EndDate',
title: '结束日期', width: 181 },
{ field: 'Id', title: 'ID', width: 100, hidden: 'true' },
{ field: 'SchoolName', title: '毕业学校', width: 200 },
{ field: 'TeacherName', title: '证明人', width: 160 },
field: 'Operation', title: '重新设置', width: 115,
formatter: function (value, row, index) {
var e = ' ';
&%@ page language="java" contentType="text/ charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%&
&!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
&%@ taglib prefix="json" uri="" %&
&%@ taglib uri="" prefix="sql"%&
&%@ page import="java.io.*,java.util.*,java.sql.*"%&
&%@ page import="javax.servlet.http.*,javax.servlet.*" %&Insert title here
&sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost/login"
user="root"
password=""/&
&sql:query dataSource="${snapshot}" var="result"&
SELECT * from E
&/sql:query&
&json:array name="items" var="item" items="${result.rows}"&
&json:object&
&json:property name="id" value="${item.id}"/&
&json:property name="firstname" value="${item.first}"/&
&json:property name="lastname" value="${item.last}"/&
&json:property name="age" value="${item.age}"/&
&/json:object&
&/json:array&
//比如你从数据库中查出来的json叫做jsonData
initTable();
function initTable () {
var html = '&table border=1&';
for (var j in jsonData) {
var obj = jsonData[j];
html += '&tr&'
html += '&td&' + obj.id + '&/td&';
html += '&td&' + obj.firstname + '&/td&';
html += '&td&' + obj.=lastname + '&/td&';
html += '&td&' + obj.age + '&/td&';
html += '&/tr&'
html += '&/table&';
$('#jsontable').append(html);
这个是我给你改过之后的，因为你的数据库返回值，我没有看到处理，所以那里你自己写一下吧！希望对你有用，楼主给个辛苦分吧
我把你写的那个东西，写到了js里面，然后通过js插入了一个table到body的div里面
可以参考 jquery.datatable.js
其他相关推荐输入关键字或相关内容进行搜索
mui.ajax('url', {
data: $(&#form&).serialize(),
dataType: 'json',
type: 'post',
timeout: 10000,
success: function(data) {
//成功的操作
error: function(xhr, type, errorThrown) {
//失败的操作
\n没错，就是设置data的值为$(&#form&).serialize()，不过这样要引入jquery，好像官方不太建议直接引入jq，不知道有没有更好的方法去序列化一个表单
要回复文章请先或}