您的位置：首页 > Web前端 > JQuery

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

2013-08-02 23:10 344 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航