struts2 json jquery 集成详解(2)
程序员文章站
2024-01-23 21:40:16
...
4页面操作。Jquery中已经提供几供ajax请求的方法，如果返回的是json对象，使用jQuery.getJSON(url,[data],[callback])会比较方便，
jQuery.getJSON(url,[data],[callback]) 通过 HTTP GET 请求载入 JSON 数据。
返回值
XMLHttpRequest
参数
url (String) : 发送请求地址。
data (Map) : (可选) 待发送 Key/value 参数。
callback (Function) : (可选) 载入成功时回调函数。
参数部分，浏览器的缓存是以url为标识的，如果url相同会使用缓存中的数据，如果不想使用缓存，可以在参数中加入一个随机数。
jQuery.each(obj,callback)
通用例遍方法，可用于例遍对象和数组
参数
object (Object) : 需要例遍的对象或数组。
callback (Function) : (可选) 每个成员/元素执行的回调函数。
回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。
Jquery操作下拉列表添加选项的方法为: $(“# categoryId”)[0].options.add(option);
页面代码如下（部分）：
<. language="." type="text/." src="/.s/jquery-1.2.2.js"></.>
<. language=".">
function fillChannel(id){
var url = "/book/getAjaxBookChannelList.action";
$.getJSON(url,{ran:Math.random()},function(json){
if(json.strAjaxChannel.length > 0){
var obj = .('(' + json.strAjaxChannel + ')');
$.each(obj,function(i,n){
option = new Option(n,i);
if(i==id)option.selected=true;
document.getElementById("channellistId").options.add(option);
});
option = new Option("全部频道",999);
if(id == 999)option.selected=true;
document.getElementById("channellistId").options.add(option);
}
else{
option = new Option("暂无频道");
document.getElementById("channellistId").options.add(option);
}
}
);
}
function fillCategory(chid,bid){
document.getElementById("categoryId").options.length=1;
var url = "/book/getAjaxBookCategoryListByChannelID.action";
var cid = 0;
if(chid > 0){
cid = chid;
}
else{
cid = document.getElementById("channellistId").value;
}
$.getJSON(url,{channelID:cid,ran:Math.random()}, function(json){
//参数为频道ID及随机数，function(json)为回调函数，其中json为取到的返回数据
if(json.strAjaxCategory.length > 0){
var obj = .('(' + json.strAjaxCategory + ')');//将json文本转化为json对象，以便于遍历
$.each(obj,function(i,n){ //jquery中的遍历方法，
option = new Option(n,i);
if(i==bid)option.selected=true;
document.getElementById("categoryId").options.add(option);
});
option = new Option("全部分类","-3");
if(bid ==-3)option.selected=true;
document.getElementById("categoryId").options.add(option);
//jquery的方法为:$(“# categoryId”)[0].options.add(option);
}
else{
if(cid == 999){
option = new Option("全部分类","-1");
document.getElementById("categoryId").options.add(option);
}
else{
option = new Option("暂无分类");
document.getElementById("categoryId").options.add(option);
}
}
}
);
}
function fillSelect(chid,cid){
fillChannel(chid);
fillCategory(chid,cid);
}
</.>
<body <s:if test="bookCategory.bookchannelId >0">onLoad="fillSelect(<s:property value="bookCategory.bookchannelId"/>,<s:property value="bookCategory.id"/>);"</s:if><s:if test="bookCategory==null">onLoad="fillChannel(0);"</s:if>>
作品类别
<select name="channellistId" id="channellistId" onChange="fillCategory(<s:if test="bookCategory.bookchannelId >0">0,</s:if><s:property value="categoryId"/>);"><option>选择频道</option></select>
<select name="categoryId" id="categoryId"><option>选择分类</option></select>
jQuery.getJSON(url,[data],[callback]) 通过 HTTP GET 请求载入 JSON 数据。
返回值
XMLHttpRequest
参数
url (String) : 发送请求地址。
data (Map) : (可选) 待发送 Key/value 参数。
callback (Function) : (可选) 载入成功时回调函数。
参数部分，浏览器的缓存是以url为标识的，如果url相同会使用缓存中的数据，如果不想使用缓存，可以在参数中加入一个随机数。
jQuery.each(obj,callback)
通用例遍方法，可用于例遍对象和数组
参数
object (Object) : 需要例遍的对象或数组。
callback (Function) : (可选) 每个成员/元素执行的回调函数。
回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。
Jquery操作下拉列表添加选项的方法为: $(“# categoryId”)[0].options.add(option);
页面代码如下（部分）：
<. language="." type="text/." src="/.s/jquery-1.2.2.js"></.>
<. language=".">
function fillChannel(id){
var url = "/book/getAjaxBookChannelList.action";
$.getJSON(url,{ran:Math.random()},function(json){
if(json.strAjaxChannel.length > 0){
var obj = .('(' + json.strAjaxChannel + ')');
$.each(obj,function(i,n){
option = new Option(n,i);
if(i==id)option.selected=true;
document.getElementById("channellistId").options.add(option);
});
option = new Option("全部频道",999);
if(id == 999)option.selected=true;
document.getElementById("channellistId").options.add(option);
}
else{
option = new Option("暂无频道");
document.getElementById("channellistId").options.add(option);
}
}
);
}
function fillCategory(chid,bid){
document.getElementById("categoryId").options.length=1;
var url = "/book/getAjaxBookCategoryListByChannelID.action";
var cid = 0;
if(chid > 0){
cid = chid;
}
else{
cid = document.getElementById("channellistId").value;
}
$.getJSON(url,{channelID:cid,ran:Math.random()}, function(json){
//参数为频道ID及随机数，function(json)为回调函数，其中json为取到的返回数据
if(json.strAjaxCategory.length > 0){
var obj = .('(' + json.strAjaxCategory + ')');//将json文本转化为json对象，以便于遍历
$.each(obj,function(i,n){ //jquery中的遍历方法，
option = new Option(n,i);
if(i==bid)option.selected=true;
document.getElementById("categoryId").options.add(option);
});
option = new Option("全部分类","-3");
if(bid ==-3)option.selected=true;
document.getElementById("categoryId").options.add(option);
//jquery的方法为:$(“# categoryId”)[0].options.add(option);
}
else{
if(cid == 999){
option = new Option("全部分类","-1");
document.getElementById("categoryId").options.add(option);
}
else{
option = new Option("暂无分类");
document.getElementById("categoryId").options.add(option);
}
}
}
);
}
function fillSelect(chid,cid){
fillChannel(chid);
fillCategory(chid,cid);
}
</.>
<body <s:if test="bookCategory.bookchannelId >0">onLoad="fillSelect(<s:property value="bookCategory.bookchannelId"/>,<s:property value="bookCategory.id"/>);"</s:if><s:if test="bookCategory==null">onLoad="fillChannel(0);"</s:if>>
作品类别
<select name="channellistId" id="channellistId" onChange="fillCategory(<s:if test="bookCategory.bookchannelId >0">0,</s:if><s:property value="categoryId"/>);"><option>选择频道</option></select>
<select name="categoryId" id="categoryId"><option>选择分类</option></select>