* JSON数据格式：
* 定义：JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
* 特点：
* 易于程序员阅读
* 易于计算机解析
* 浏览器原生就支持JSON数据格式
* 结构相对来讲，比较灵活
* 元素值可具有的类型：string,number,object,array,true,false,null
* JSON结构：
* key/value格式：类似于Map集合
* 数组
* JSON数据格式在Ajax异步交互中的应用：
* 服务器端：构建一个String类型JSON数据格式内容
* 客户端：
* XMLHttpRequest对象的responseText属性来接收
* 利用eval()函数，进行类型转换
* 如何将javabean、List、Array和Map集合转换成JSON数据格式？
* 第三方工具：json-lib
<script language="JavaScript"> /* * 定义一个javabean * Class Province{属性} * province.name * * JSON数据格式：类似于Map集合，其实就是javascript对象 * * 是以"{}"开始和结束的 * * 数据存储是以"key/value" * * 多个数据之间，用","隔开 */ var person = { name : "zs",age : 18,sex : "男" } alert(person.name); </script>
<script language="JavaScript"> /* * 定义一个javabean * Class Province{属性} * province.name * * JSON数据格式：类似于Map集合，其实就是javascript对象 * * 是以"{}"开始和结束的 * * 数据存储是以"key/value" * * 多个数据之间，用","隔开 */ var person = [ { name : "zhangwuji",sex : "男" },{ name : "zhouzhiruo",sex : "女" } ] alert(person[1].name); </script>
<script language="JavaScript"> /* * 定义一个javabean * Class Province{属性} * province.name * * JSON数据格式：类似于Map集合，其实就是javascript对象 * * 是以"{}"开始和结束的 * * 数据存储是以"key/value" * * 多个数据之间，用","隔开 */ var person = { "yttlj": [ { name : "zhangwuji",sex : "男" },{ name : "zhouzhiruo",sex : "女" } ] } alert(person.yttlj[1].name); </script>
<script language="JavaScript"> /* * 定义一个javabean * Class Province{属性} * province.name * * JSON数据格式：类似于Map集合，其实就是javascript对象 * * 是以"{}"开始和结束的 * * 数据存储是以"key/value" * * 多个数据之间，用","隔开 */ var person = [ { "yttlj": [ { name : "zhangwuji",sex : "男" },{ name : "zhouzhiruo",sex : "女" } ] },{ "xajh": [ { name : "linghuchong",{ name : "dongfangbubai",sex : "女" } ] } ] alert(person[1].xajh[1].name); </script>
<script language="JavaScript">
/*
* 定义一个javabean
* Class Province{属性}
* province.name
*
* JSON数据格式：类似于Map集合，其实就是javascript对象
* * 是以"{}"开始和结束的
* * 数据存储是以"key/value"
* * 多个数据之间，用","隔开
*/
var person1 = {
"wuxia": [{
"yttlj": [{
name: "zhangwuji",age: 18,sex: "男"
},{
name: "zhouzhiruo",sex: "女"
}]
},{
"xajh": [{
name: "linghuchong",{
name: "dongfangbubai",sex: "女"
}]
}],"yanqing": [{
"hzgg": [{
name: "wuage",{
name: "xiaoyanzi",{
"qssymm": [{
name: "heshuhuan",{
name: "luyiping",sex: "女"
}]
}]
}
var person2 = {
name: "xxx",addrress: {
"home": "xxshixxqu","family": "yyshiyyqu"
}
}
var method = {
add: function(a,b){
return a + b;
}
}
alert(method.add(1,2));
// alert(person1.yanqing[0].hzgg[1].name);
</script>
案例
public class JsonServlet extends HttpServlet {
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws servletexception,IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//手工构建一个String类型的json数据格式
String json = "[{'province':'吉林省'},{'province':'辽宁省'},{'province':'山东省'}]";
out.println(json);
}
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<Meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<Meta http-equiv="description" content="this is my page">
<Meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<select id="province" name="province">
<option value="">请选择....</option>
</select>
<select id="city" name="city">
<option value="">请选择.....</option>
</select>
</body>
<script language="JavaScript">
window.onload = function(){
var xhr = ajaxFunction();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data = xhr.responseText;
/*
* eval()函数：将接收响应的数据格式，转换成json数据格式
*
* 向eval()函数，传递一对空的"{}"(空的json格式)
* * 利用"()"将其包装，eval()函数会强行将其转换成json数据格式
* * 不用"()"将其包装，eval()函数会将其解释为一个空的语句块
*/
var json = eval("("+data+")");
alert(json);
}
}
}
xhr.open("get","../jsonServlet?timeStamp="+new Date().getTime(),true);
xhr.send(null);
function ajaxFunction(){
var xmlHttp;
try{ // Firefox,Opera 8.0+,Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
}
</script>
</html>
总结 注意 eval()函数的用法
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
