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

最新推荐文章于 2025-03-17 13:55:58 发布

wangtao2013wto

最新推荐文章于 2025-03-17 13:55:58 发布

阅读量892

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript/Ajax/JQuery

本文链接：https://blog.youkuaiyun.com/wangtaocom/article/details/9722953

JavaScript/Ajax/JQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍JSON数据格式及其在Ajax中的应用，通过省市联动案例详细展示了如何使用jQuery进行数据交互及DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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的控制器就不写了