JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。
JSON构建的结构：
1. “名称/值"对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），记录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组 （associative array）。
2. 值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。
以下是我写的一个Js+Ajax解析Json的案例。源代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
td {
text-align: center;
color: #333333;
font-size: 12px;
}
th {
color: #aaaaaa;
font-size: 13px;
}
</style>
<script type="text/javascript">
function getXMLHttpRequest() {
var xhr;
try {
xhr = new XMLHttpRequest();
} catch (err1) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err2) {
alert("您的浏览器版本不支持Ajax....");
}
}
return xhr;
}
function $(id) {
return document.getElementById(id);
}
function saxJson() {
var xhr = getXMLHttpRequest();
xhr.open("GET", "./json.jsp", true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var stus = eval("(" + xhr.responseText + ")");
var tby = $("tby");
for ( var i = 0; i < stus.length; i++) {
var tr = document.createElement("tr");
var ntd = document.createElement("td");
var std = document.createElement("td");
var atd = document.createElement("td");
var etd = document.createElement("td");
ntd.innerHTML = stus[i].name;
std.innerHTML = stus[i].sex;
atd.innerHTML = stus[i].age;
etd.innerHTML = stus[i].email;
tr.appendChild(ntd);
tr.appendChild(std);
tr.appendChild(atd);
tr.appendChild(etd);
tby.appendChild(tr);
}
}
}
}
</script>
</head>
<body onload="saxJson();">
<h2 align="center" style="color: #666666;">
JS解析JSON的案例
</h2>
<div id="display" align="center">
<table style="border-collapse: collapse" cellspacing="0"
cellpadding="3" id="tbl" border="1" width="360">
<thead>
<tr>
<th>
姓名
</th>
<th>
性别
</th>
<th>
年龄
</th>
<th>
邮箱
</th>
</tr>
</thead>
<tbody id="tby">
</tbody>
</table>
</div>
<br />
<div align="center" style="font-size: 12px; color: #333333;">
Copyright©CSDN Corporation 2010-2011
</div>
</body>
</html>
json.jsp代码清单：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
student=[
{
name:"SXPGOG",
sex:"boy",
age:"21",
email:"dyzh.yysg@163.com"
},
{
name:"Lily",
sex:"Girl",
age:"19",
email:"532265808@qq.com"
},
{
name:"XYZ",
sex:"Boy",
age:"22",
email:"unknow@qq.com"
},
{
name:"Tom",
sex:"Boy",
age:"22",
email:"unknow@qq.com"
}
]
注意：json.jsp中的代码要符合Json的语法规范。
分享到：
不错嘛
相关推荐
### 基于JQuery、Ajax与JSON实现分页显示技术解析 #### 技术背景与应用场景 在现代Web开发中，数据展示是一项至关重要的功能。随着数据量的增长，简单的列表展示方式已不能满足用户体验的需求。为了提升用户体验，...
在ZTree与Struts2的交互中，JSON被用作数据传输的载体，服务器返回的权限树结构数据以JSON格式表示，前端JavaScript可以轻松解析并渲染到界面上。 在提供的资源中，我们可以看到以下几个文件： 1. **test_if_in_...
返回到前端，JavaScript接收到服务器返回的JSON数据后，会解析这些数据并动态地在二级菜单（城市）中填充选项。同样，当用户在二级菜单中选择一个城市时，会再次触发AJAX请求，获取该城市的下属县，并更新三级菜单。...
在AJAX请求中，通常会将服务器返回的数据格式化为JSON，然后JavaScript可以方便地解析这些数据并更新页面。 在这个2.0版本中，可能的改进包括优化了数据传输效率，增强了安全性，或者提供了更灵活的接口。文件名`...
2. **解析与渲染**：jQuery的`$.parseJSON()`（现在已弃用，推荐使用`$.getJSON()`或`$.ajax()`的dataType设置为'json'）方法用于解析JSON字符串为JavaScript对象，然后可以在前端动态更新DOM。 **Ajax级联操作** ...
在“jsa03”这个文件中，可能包含了相关的JavaScript代码，这些代码负责与Struts2 Action进行Ajax通信，使用jQuery发送请求并处理返回的JSON数据。例如，可能有一个函数用于向服务器发送请求，获取数据，然后使用$....
3. **数据解析**：Ajax请求成功后，前端JavaScript将接收到的JSON数据解析成JavaScript对象，为ZTree准备节点信息。 4. **ZTree渲染**：使用ZTree的API，将解析后的数据传入，动态创建或更新树形结构。 5. **交互...
在这个例子中，服务器端通过`JsonResult`返回JSON格式的用户信息，客户端通过AJAX请求获取这些信息并解析显示。 **五、总结** AJAX+JSON在.NET环境中的应用大大提高了Web应用程序的交互性和效率，减少了不必要的...
这个系统利用了ASP（Active Server Pages）作为后端服务器端脚本语言，结合AJAX（Asynchronous JavaScript and XML）技术和JSON（JavaScript Object Notation）进行数据交换，实现了用户与服务器之间的异步通信，为...
然后，前端JavaScript代码会解析这个JSON字符串，将其转换为JavaScript对象，接着更新市的下拉列表。同样的过程会发生在市被选择后，获取并填充区的下拉列表。 为了实现这个功能，我们需要编写以下主要部分的代码：...
【标题】"jsp+ajax+json项目（web）"是一个典型的Web开发实践案例，它将JSP、Ajax和JSON技术融合在一起，展示了如何在实际的Web应用中进行数据的动态交互和更新。该项目旨在帮助初学者理解这三种技术在Web开发中的...
在实际应用中，它常与JSON（JavaScript Object Notation）数据格式结合使用，因为JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。这个“AJAX+json初学案例”旨在帮助初学者理解如何...
Ajax**：Ajax（异步JavaScript和XML）技术使得Web应用无需刷新整个页面即可更新部分内容。在"eyou"项目中，Ajax被用来实现页面的无刷新交互，通过发送Json格式的数据到服务器，实时获取或更新信息，提高了系统的...
Json（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在Struts2中，可以通过Json插件将Java对象转换为Json格式，然后发送给前端。JQuery可以方便地解析这...
这个“Ajax+Json案例”可能是一个教学资源或者示例代码集合，用于帮助开发者理解和实践这两种技术的结合。 Ajax是一种在不刷新整个网页的情况下，通过后台与服务器进行少量数据交换，从而实现局部更新页面的技术。...
- 解析JSON，根据返回的状态判断登录是否成功，然后更新页面显示，如显示登录成功消息或者错误提示。 5. **安全性考虑**： - 在实际项目中，我们需要对用户密码进行加密存储和传输，避免明文传输带来的安全风险。...
例如，`json.pdf`可能包含了JSON的结构介绍、数据类型、编码规则、解析和生成的方法，以及在AJAX和JAVA中的具体应用案例。 在实际开发中，理解JSON的结构和语法规则是基础，学会使用XMLHttpRequest对象来发送异步...
5. jQuery解析JSON数据，并填充到第二级和第三级的select中。 6. 当第二级或第三级被选择时，重复上述过程，但只更新下一级的选项。 为了实现这个功能，你需要熟悉JavaScript、jQuery、JSON以及Java的Web开发技术。...
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，广泛用于前端和后端之间的数据传输，而Ajax（Asynchronous JavaScript and XML）则是一种让网页进行异步更新的技术，可以实现页面局部刷新，提高...
在AJAX请求成功并接收到数据后，我们需要解析这个响应。对于JSON数据，可以使用JavaScript的`JSON.parse()`函数。接着，我们可以使用DOM操作（例如，`innerHTML`属性或`appendChild`方法）将数据动态插入到HTML元素...