JSON 入门探讨。
来源:互联网 发布:婚礼请帖制作软件 编辑:程序博客网 时间:2024/05/21 04:20
添加 JSON
在使用名称/值对或 XML 时,实际上是使用 JavaScript 从应用程序中取得数据并将数据转换成另一种数据格式。在这些情况下,JavaScript 在很大程度上作为一种数据操纵语言,用来移动和操纵来自 Web 表单的数据,并将数据转换为一种适合发送给服务器端程序的格式。
但是,有时候 JavaScript 不仅仅作为格式化语言使用。在这些情况下,实际上使用 JavaScript 语言中的对象来表示数据,而不仅是将来自 Web 表单的数据放进请求中。在这些情况下,从 JavaScript 对象中提取数据,然后再将数据放进名称/值对或 XML,就有点儿多此一举 了。这时就合适使用 JSON:JSON 允许轻松地将 JavaScript 对象转换成可以随请求发送的数据(同步或异步都可以)。
JSON 并不是某种魔弹;但是,它对于某些非常特殊的情况是很好的选择。不要认为您不会遇到这些情况。阅读本文和下一篇文章来了解 JSON,这样,遇到这类问题时您就知道该怎么办了。
JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪(稍后会看到几个示例),但是 JavaScript 很容易解释它,而且 JSON 可以表示比名称/值对更复杂的结构。例如,可以表示数组和复杂的对象,而不仅仅是键和值的简单列表。
如果要处理大量 JavaScript 对象,那么 JSON 几乎肯定是一个好选择,这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。
示例1:JSON数据格式,以及获取其中的数据
<script type="text/javascript">
var people =
......{ "programmers": [
......{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
......{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
......{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
],
"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": "Rachmaninoff000", "instrument": "piano" }
]
};
people.musicians[1].lastName = "Rachmaninov111"; //赋值修改数据
alert(people.authors[1].genre); // Value is "fantasy"
alert(people.musicians[1].lastName);
alert(people.programmers[2].firstName); // Value is "Elliotte"
var com =
......{comments:[
......{
id:1,
author:"someone1",
url:"http://someone1.x2design.net",
content:"hello"
},
......{
id:2,
author:"someone2",
url:"http://someone2.x2design.net",
content:"hello"
},
......{
id:3,
author:"someone3",
url:"http://someone3.x2design.net",
content:"hello"
}],
authors: [
......{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
......{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
......{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }]
};
alert(com.comments[0]. content);
alert(com.authors[0]. firstName);
</script>
示例2:利用jquery 和 JSON获取进行异步数据的传递和显示
示例中传递过来的数据格式为:
[{"name":"备忘录","id":"3"},{"name":"学习java","id":"5"},{"name":"技术研究","id":"2"},{"name":"目前工作","id":"1"},{"name":"记事本","id":"4"}]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery.js"></script>
<link href="task.css" type="text/css" rel="stylesheet">
<title>My JSP 'demoTest.jsp' starting page</title>
<script type="text/javascript">...
//获取任务列表
function getLists() ...{
$.getJSON("taskservice.jsp", //服务器页面地址
...{
action: "getLists" //action参数
},
function(json) ...{ //回调函数
alert(json);
alert($("#lists"));
$("#lists").empty(); //清空现有列表
$(json).each(function(i) ...{ //遍历结果数组
//创建任务列表项容器div
var box = $(document.createElement("div"));
box.addClass("box");
box.append("·");
//创建任务列表项span
var spanNode = $(document.createElement("span"));
spanNode.id("list" + json[i].id); //设置任务id
spanNode.addClass("pointer"); //增加class样式
spanNode.addClass("list"); //增加class样式
spanNode.click(function()...{ //设置鼠标点击响应函数
alert(json[i].id); //鼠标点击后获取列表内任务
});
spanNode.html(json[i].name); //设置显示的任务列表项名称
box.append(spanNode); //将任务列表项追加到容器中
//在任务列表项容器中继续追加DEL操作span
$(box).append("<span class='operation pointer' onclick='delList(" + json[i].id + ")'>[ DEL ]</span>");
//在任务列表项容器中继续追加EDIT操作span
$(box).append("<span class='operation pointer' onclick='editList(" + json[i].id + ")'>[ EDIT ]</span>");
$("#lists").append(box); //将任务列表项容器加入到列表中
});
//在列表中追加添加新列表表单
$("#lists").append("<div><input type='text' id='newListName'></div>");
$("#lists").append("<div><input type='button' value='添加新列表' onclick='addNewList()'></div>");
}
);
}
<%
request.getSession().setAttribute("_LOGIN_USER_","1");
%>
</script>
</head>
<body onload="getLists()">
<table id="taskContainer" style="" border="0">
<tr>
<td valign="top">
<!-- 任务列表 -->
<div class="title">
任务区列表
</div>
<div id="lists">
</div>
</td>
<td valign="top">
<!-- 任务 -->
<div id="currentList" class="title"></div>
<div id="tasks">
</div>
</td>
</tr>
</table>
</body>
</html>
- JSON 入门探讨。
- JSTL 入门: 探讨 core
- JSTL 入门:探讨 core
- JSTL 入门: 探讨 core
- JSTL 入门: 探讨 core
- JSTL 入门: 探讨 core
- JSTL 入门: 探讨 core
- JSTL 入门: 探讨 core
- PPT入门学习探讨
- JSON入门
- JSON 入门
- Json入门
- JSON入门
- JSON入门
- JSON入门
- JSON入门
- json入门
- JSON入门
- 入侵检测探讨及网络安全发展趋势
- 北大学生告微软幕后团队曝光 将打持久战 (转载)
- 获取配置文件自定义配置组的配置信息
- 博客开通了,还没有写任何信息,就写个操作符重载
- Notes on WPF Changes from Beta 1 to Sept 2005 (PDC) CTP
- JSON 入门探讨。
- 8-steps metrics program - an introduction to metrics
- DWR学习(一)
- currentTarget对象介绍
- Sybase12.5.2与12.5.1的不同
- netstat
- 分分分
- Description of COM principle
- ArcGIS Server Java ADF开发的JSF知识介绍