Ajax和Jquery学习总结（2）——JSON格式的数据

来源：互联网发布：中世纪2原版优化9下载编辑：程序博客网时间：2024/05/22 06:23

JSON格式的数据是Ajax和Jquey可以处理的JS的数据：其格式如下：

 var people ={            "programmers": [            { "firstName": "Brett", "email": "brett@newInstance.com" },            { "firstName": "Jason",  "email": "jason@servlets.com" },            { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }           ],          "authors": [            { "firstName": "Isaac",  "genre": "science fiction" },            { "firstName": "Tad", "genre": "fantasy" },            { "firstName": "Frank",  "genre": "christian fiction" }           ],          "musicians": [            { "firstName": "Eric",  "instrument": "guitar" },            { "firstName": "Sergei", "instrument": "piano" }           ]};    window.alert(people.programmers[1].firstName);    window.alert(people.musicians[1].instrument);

全部都是key:value的形式比较易于理解。不过JSON数据在使用时基本上都是先从数据库中提取出来把他封装到list中，这里就不得不提其使用的方法了。

 //将取出的数据转化为Json格式  JSONArray jsonArray=JSONArray.fromObject(list);    System.out.println(jsonArray.toString());  out.println(jsonArray.toString());

将服务器短的数据写回给浏览器，然后再客户端来接收；最典型的例子当属省市联动的案例实现，其中使用了与Struts的整合：完整的代码奉上：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>test01.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="./js/jquery-1.4.2.js"></script>  </head>  <body>     <select id="province" name="province">       <option value="">请选择....</option>     </select> <select id="city" name="city"> <option value="">请选择.....</option> </select> <select id="county" name="county"> <option value="">请选择.....</option> </select>  </body> <script language="JavaScript">//页面一起动就加载  $(document).ready(function(){ //从数据库中查询省的信息显示在select id="province" 中$.post("listAction.do?method=listProvince",function(data,textStatus){//alert(data);var dataObj=eval("("+data+")");for(var i=0; i<dataObj.length; i++){var pid=dataObj[i].pid;var pname=dataObj[i].pname;$option=$("<option></option>");$option.attr("value",pid);$option.text(pname);$("#province").append($option);}}); //省份的变化引起城市的变化 $("#province").change(function(){ var pid=this.value;   $.post("listAction.do?method=listCity",{pid:pid},function(data,textStatus){// //清空城市下的option选项保留请选择 //    方法一// $("#city option").each(function(index,domEle){// if(index!=0){//$(this).remove();//自己清除自己//}//// }); //方法二  批量删除$("#city option[value!='']").remove();//启动时保证城市没选时县城数据为空$("#county option[value!='']").remove();  //alert(data);var dataObj=eval("("+data+")");for(var i=0; i<dataObj.length; i++){var cid=dataObj[i].cid;var cname=dataObj[i].cname;$option=$("<option></option>");$option.attr("value",cid);$option.text(cname);$("#city").append($option);}  }); });//城市的变化引起县城的变化 $("#city").change(function(){ var cid=this.value;   $.post("listAction.do?method=listCountry",{cid:cid},function(data,textStatus){//清空县下选项//方法二  批量删除$("#county option[value!='']").remove();  //alert(data);var dataObj=eval("("+data+")");for(var i=0; i<dataObj.length; i++){var tid=dataObj[i].tid;var tname=dataObj[i].tname;$option=$("<option></option>");$option.attr("value",tid);$option.text(tname);$("#county").append($option);}  }); }); });     </script></html>

这里的Struts的控制器就不写了