Ajax与JSON的使用_H5之家 - 中国HTML5教程资源分享第一站

文章详细内容

Ajax与JSON的使用

发布日期：2014年05月27日来源：PHP1.CN 点击：143

摘要：终于通过学习自己写出多级分组的json并应用到目录树下了。!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN://www.w3....

终于通过学习自己写出多级分组的json并应用到目录树下了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>showJSON</title>
<script type="text/javascript">
function showJSON() {
     var user =
     {
"username":"andy",
"age":20,
         "info":
    [
     { "tel": "123456", "cellphone": "98765"},
     { "tel": "111", "cellphone": "222"}
    ],
"address":
[
{"city":"beijing","postcode":"222333"},
{"city":"newyork","postcode":"555666"}
]
     }
     alert(user.username);
     alert(user.age);
//alert("info:"+user.info);
alert(user.info[0].cellphone);
alert(user.address[0].city);
alert(user.address[0].postcode);
}
function showJSON2()
{
var data ={root:[{study:[{'NodeName': '招商研究'},{'NodeName':'个股研究','NodeLink':'http://www.baidu.com', 'NodeTarget':'_blank'},{'NodeName':'个股研究','NodeLink':'http: //www.baidu.com','NodeTarget':'_blank'}]},{magazine:[{'NodeName': '客户杂志'},{'NodeName':'推荐文章','NodeLink':'http://www.baidu.com', 'NodeTarget':'_blank'},{'NodeName':'最新杂志','NodeLink':'http: //www.baidu.com','NodeTarget':'_blank'}]},{info:[{'NodeName': '市场信息'},{'NodeName':'熊市信息','NodeLink':'http://www.baidu.com', 'NodeTarget':'_blank'},{'NodeName':'熊市信息','NodeLink':'http: //www.baidu.com','NodeTarget':'_blank'}]},{monitor:[{'NodeName': '后台监控'},{'NodeName':'自主监控','NodeLink':'http://www.baidu.com', 'NodeTarget':'_blank'},{'NodeName':'委托监控','NodeLink':'http: //www.baidu.com','NodeTarget':'_blank'}]}]}
alert(data.root[0].study[0].NodeName);
alert(data.root[0].study[1].NodeName);
alert(data.root[0].study[1].NodeLink);
}
</script>
</head>

<body >

</body>
</html>

－－－－－－－－－－－－－－

生成对应JSON的jsp

－－－－－－－－－－－－－－

<%@ page contentType="text/html; charset=gbk" language="java" errorPage="" %>
<%@ page language="java" import="java.io.PrintWriter"%>

<%
response.setHeader("Cache-Control", "no-cache");
response.setCharacterEncoding("gbk");
PrintWriter xmlout = response.getWriter();
int start = 0;
int limit = 2;
//int limit = (int) (Math.random() * 10*10);
//System.out.println(limit);

String url = "http://www.baidu.com";
String target = "_blank";
StringBuffer sb = new StringBuffer();

sb.append("{root:[");

sb.append("{study:[{'NodeName': '招商研究'},");
for (int i=start;i<limit;i++)
{
   sb.append("{'NodeName':'");
   if(Math.floor(Math.random() * 100)>50)
   {
    sb.append("个股研究");
   }
   else
   {
    sb.append("大盘研究");
   }
   sb.append("','NodeLink':'");
   sb.append(url);
   sb.append("','NodeTarget':'");
   sb.append(target);
   sb.append("'}");
   if(i!=limit-1){
    sb.append(",");
   }
   else
   {
    sb.append("]},");
   }
}

sb.append("{magazine:[{'NodeName': '客户杂志'},");
for (int i=start;i<limit;i++)
{
   sb.append("{'NodeName':'");
   if(Math.floor(Math.random() * 100)>50)
   {
    sb.append("最新杂志");
   }
   else
   {
    sb.append("推荐文章");
   }
   sb.append("','NodeLink':'");
   sb.append(url);
   sb.append("','NodeTarget':'");
   sb.append(target);
   sb.append("'}");
   if(i!=limit-1){
    sb.append(",");
   }
   else
   {
    sb.append("]},");
   }
}