jQuery json与Spring结合的问题

@JSON(serialize=false)
json和Spring结合的时候 应该注意不应该 序列化 Spring中依赖注入的东西 jar包也应该struts2-json-plugin-2.2.1.1.jar json-lib-2.1-jdk15.jar ezmorph-1.0.3.jar
这里操作 防止json 将注入的bean 序列化。 或者在action 中配置 不被序列化的属性 <result type="json"><param
name="excludeProperties">JsonService</param></result>

struts2+spring+hibernate js框架应用了Jquery 数据传输json
json与spring 的冲突 出现jsonwriter异常下面具体操作!用@JSON(serialize=false) 防止序列化
当struts2的action配置引入json 时,例如:
<package name="com.pdna.student.action.LessonAction_xl" extends="json-default">
<action name="jsontest" class="LessonAction_xl" method="jsontest">
<result type="json"></result>
</action>
</package>
此时引入json 插件 返回数据自动封为json数据,前台接受
fucntion jsontest(){
var url="jsontest.action";
//dt为返回数据
jQuery.post(url,function(dt){
//alert(dt) //可以查看返回的 dt 格式
var tpy = eval('(' + dt+ ')');
})

}
action 中的方法
private List publist;
private JsonService jsonservice; //spring 注入的service

public String jsontest(){
try{
publist=jsontestservice.jsontest()
return SUCCESS;
}cacth(Exception ex){
ex.printStackTrace();
return ERROR;
}
}
//get -set 方法

//这里操作 防止json 将注入的bean 序列化。 或者在action 中配置 不被序列化的属性 <result type="json"><param
name="excludeProperties">JsonService</param></result>
@JSON(serialize=false)
public JsonService getJsonService() {
return jsonservice;
}
public void setJsonService(JsonService jsonservice) {
this.jsonservice = jsonservice;
}
public List getPublist() {
return publist;
}
public void setPublist(List publist) {
this.publist = publist;
}
service中的 操作方法不在这里写了


使用json 时候报
Positioned Update not supported 异常
出现此类异常 主要原因是在操作的 hibernate dao 类有 映射关系
由于jsonplugin并不区分类和动态生成的类,所以也会试图序列化hibernateLazyInitializer属性,从而导致出现上述的异常,
网上会找到很多的解决办法,我的解决方法
方法一:将 映射关系的延迟加载lazy="false";
方法二:hibernate 完全交给spring 管理
<filter>
<filter-name>hibernateFilter</filter-name>
<filter-class>
org.springframework.orm.hibernate3.support.OpenSessionInViewFilter
</filter-class>
<init-param>
<param-name>singleSession</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>hibernateFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>


http://huqilong.blog.51cto.com/53638/136802

http://www.360doc.com/content/10/0731/19/117897_42788515.shtml





1.JQuery的Ajax实现并与struts2的结合
2.配置过程:
a.新建web项目;
b.修改web.xml文件
c.在src下添加struts.xml文件,添加jar包支持:freemarker.jar ognl.jar struts2-core.jar commons-fileupload.jar
commons-io.jar xwork-core-2.1.6.jar(这个包加上版本号,是因为下文要提到它),注意jar包支持
这六个包是struts必须依赖的jar包
d.配置jsp文件,在jsp里面添加jquery支持
e.配置action
f ( 一)在struts2.1.6之前的版本:
添加相应的json包:json-lib.jar jsonplugin.jar 这里要注意很重要的一点,因为json大量引用了 Apache commons的包,所以这里要一并加入,
需要的commons包共4个,除了commons的包外,还需要引入一个 ezmorph的包,所以这一步一共要引入7个包,列出如下:
commons-collections.jar commons-lang.jar
commons- beanutils.jar commons-logging.jar ezmorph.jar 再加上json的两个包共七个
(二)struts2.1.6,添加jsonplugin0.34或者jsonplugin0.7
(三)struts2.1.8则添加json-lib-2.2.3.jar,struts2-json-plugin,struts2-junit- plugin


3.插件使用:
1.validation插件:详见table-validation.jsp,主要为引入一个jquery.validate.js,获取相应的属性名来进行验证;
2.tablesort插件:目前用的是兼容中文的官网版本,一是可以实现自动排序,二是支持中文;要注意在table当中的格式,这点很重要
3.tablesortpager插件



JQuery与Json结合的一些注意事项:
1.$.get(url,data,function(data){
eval(data);
})
eval(data)将数据转换为js对象;
实际上如果返回的json对象,可通过将参数直接命名为json即可,如下
$.get(url.data,function(data){},"json")

2.取json属性时,尽量用中括号方式,原因是如果有数字属性会发生不识别的现象
eg:var a=obj["31001"];
//obj.31001则可能出错
解决办法有其它方式:比如将属性值31001改为s31001

3.乱码问题:
在struts1.2中,通过设置表头的编码来解决乱码问题,注意对于xml和json,要分别设置为text/xml和text/json
eg:response.setContentType("text/json; charset=utf-8");



1.struts.xml配置:


view plaincopy to clipboardprint?

<?xml version="1.0" encoding="UTF-8"?>
<!-- 指定Struts 2配置文件的DTD信息 -->
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.i18n.encoding" value="utf-8"></constant>
<package name="S2SHJQuery" extends="json-default">
<action name="show" class="action.ShowAction">
<result type="json"/>
</action>
</package>
</struts>



2.ShowAction.java配置 :


view plaincopy to clipboardprint?

package action;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import org.apache.struts2.json.annotations.JSON;

import com.opensymphony.xwork2.ActionSupport;
public class ShowAction extends ActionSupport {
private String testvalue;
private String result;
private List<String> list;
private List<User> userlist;
private User user;
private Map<String, User> map;
private String[] autoarray;
public String[] getAutoarray() {
return autoarray;
}
public void setAutoarray(String[] autoarray) {
this.autoarray = autoarray;
}
@JSON(serialize=false)
public Map<String, User> getMap() {
return map;
}
public void setMap(Map<String, User> map) {
this.map = map;
}
@JSON(serialize=false)
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
@JSON(serialize=false)
public List<User> getUserlist() {
return userlist;
}
public void setUserlist(List<User> userlist) {
this.userlist = userlist;
}
@JSON(serialize=false)
public List<String> getList() {
return list;
}
public void setList(List<String> list) {
this.list = list;
}

public void setTestvalue(String testvalue) {
this.testvalue = testvalue;
}
@JSON(serialize=false)
public String getTestvalue() {
return testvalue;
}
@JSON(serialize=false)
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
@Override
public String execute() throws Exception {
// TODO Auto-generated method stub
System.out.println("test is ok: "+testvalue);
//1.????string
/*int i=9;
//result=""+i+"";
result="中国";*/
//2.list?
/*list=new ArrayList<String>();
list.add("allen");
list.add("中国");
list.add("adc");*/
//3.list?а?User
/*userlist=new ArrayList<User>();
User user1=new User();
user1.setPassword(1);
user1.setUsername("username1");
User user2=new User();
user2.setPassword(2);
user2.setUsername("username2");
User user3=new User();
user3.setPassword(3);
user3.setUsername("username3");
userlist.add(user1);
userlist.add(user2);
userlist.add(user3);*/
//4.User???????
/*user=new User();
user.setPassword(1);
String username="中国";
user.setUsername(username);
System.out.println(user.getUsername());
*/
//5.map????
/*map=new HashMap<String, User>();
User user1=new User();
user1.setPassword(1);
user1.setUsername("username1");
User user2=new User();
user2.setPassword(2);
user2.setUsername("username2");
User user3=new User();
user3.setPassword(3);
user3.setUsername("username3");
map.put("s1",user1 );
map.put("s2",user2 );
map.put("s3",user3 );*/
/*map=new HashMap<String, String>();//??????String,string???
map.put("s1","user1");
map.put("s2","user2");
map.put("s3","user3");*/
//7.直接传递数祖
autoarray=new String[3];
autoarray[0]="a";
autoarray[1]="b";
autoarray[2]="c";

return SUCCESS;
}


}



3.show.jsp配置:


view plaincopy to clipboardprint?

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<mce:script type="text/jt" src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js"></mce:script>
<base href="<%=basePath%>">
<title>struts2+jquery+json</title>
<mce:script type="text/javascript"><!--
//1.struts2+jquery+json单独传递单个参数
/*$(function(){
$("#jquerytest").click(function(){
var params={testvalue:$('#test').val()};
$.ajax({
url:"show.action",
data:params,
type:'post',
dataType:'json',
success:function(data){
//data += decodeURI(data.shtml) ;
alert(" 成功");
alert(data.result);
},
error: function(){
alert(" 失败");
}
})
})
})*/
//2.jquery单独传递含单个参数的list
/*$(function(){
$("#jquerytest").click(function(){
var params={testvalue:$('#test').val()};
$.ajax({
url:"show.action",
data:params,
type:'post',
dataType:'json',
success:function(data){
var jsonobject=data.list;
for(var j=0;j<jsonobject.length;j++)
{
alert(jsonobject[j]);
}
},
error: function(){
alert(" 失败");
}
})
})
})*/
//3.jquery单独传递含对象类型User的list
$(function(){
$("#jquerytest").click(function(){
var params={testvalue:$('#test').val()};
$.ajax({
url:"show.action",
data:params,
type:'post',
dataType:'json',
success:function(data){
var jsonobject=data.userlist;
/*for(var j=0;j<jsonobject.length;j++)
{
alert(jsonobject[j].username);
alert(jsonobject[j].password);
}
*/
$.each(jsonobject,function(key,value){
alert(key+" "+value.username);
alert(key+" "+value.password);
})
}
,
error: function(){
alert("失败");
}
})
})
})
//4.jquery单独传递User对象类型
/*$(function(){
$("#jquerytest").click(function(){
var params={testvalue:$('#test').val()};
$.ajax({
url:"show.action",
data:params,
type:'post',
dataType:'json',
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success:function(data){
var jsonobject=data.user;
alert(jsonobject.username);
},
error: function(){
alert(" 失败");
}
})
})
})*/
//5.jquery传递含User对象类型的map类型
/*$(function(){
$("#jquerytest").click(function(){
var params={testvalue:$('#test').val()};
$.ajax({
url:"show.action",
data:params,
type:'post',
dataType:'json',
success:function(data){
var jsonobject=data.map;
alert(data.map.s1.username);// 一步一步获取值
$.each(data.map,function(key,value){
alert(key+": "+value.username);
})
},
error: function(){
alert(" 失败");
}
})
})
})*/
// --></mce:script>
</head>
<body>
<form>
<input type="button" value="JQuery" id="jquerytest"><br>
<input type="text" value="美国" name="test" id="test">
</form>
</body>
</html>





4.tableopen.jsp弹出层插件:


view plaincopy to clipboardprint?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thickbox Plus - Download by http://www.codefans.net</title>

<mce:style type="text/css" media="all"><!--
@import "css/global.css";
--></mce:style><style type="text/css" media="all" mce_bogus="1">@import "css/global.css";</style>
<mce:script src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js" type="text/javascript"></mce:script>
<mce:script src="/S2SHJQuery/lib/thickbox_plus.js" mce_src="S2SHJQuery/lib/thickbox_plus.js" type="text/javascript"></mce:script>

</head>
<body>
<div id="contentPad">
<h1>Thickbox Plus</h1>
<div>
<a href="images/image1.jpg" mce_href="images/image1.jpg" title="Sample caption" class="thickbox"><img src="images/image1_t.jpg" mce_src="images/image1_t.jpg" alt="Image 1" /></a>

<a href="images/image2.jpg" mce_href="images/image2.jpg" title="Another sample caption" class="thickbox"><img src="images/image2_t.jpg" mce_src="images/image2_t.jpg" alt="Image 2"/></a>
</div>
</div>
</body>
</html>



5.tablesorter.jsp排序层插件:


view plaincopy to clipboardprint?

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>列表排序</title>
<link rel="stylesheet" type="text/css" media="screen"
href="css/screen.css" />
<mce:script src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js"
type="text/javascript"></mce:script>
<mce:script
src="/S2SHJQuery/lib/jquery.tablesorter.js"
type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function() {
$("#userList").tablesorter({sortList: [ [2,1]]} );//也可通过传递参数来实现
});

// --></mce:script>
</head>
<body>
This is my JSP page.
<br>
<table id="userList">
<thead>
<tr>
<th>Name</th>
<th>Sex</th>
<th>old</th>
</tr>
</thead>
<tbody>
<tr>
<td>李四</td>
<td>男</td>
<td>14</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>50</td>
</tr>
<tr>
<td>赵五</td>
<td>Sex</td>
<td>60</td>
</tr>
<tr>
<td>丽丽</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>蝈蝈</td>
<td>女</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>



6.tablesortpager.jsp排序兼分页插件:


view plaincopy to clipboardprint?

<!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=utf-8" />
<mce:script language="java script" type="text/javascript" src="/S2SHJQuery/lib/jquery-1.2.6.pack.js" mce_src="S2SHJQuery/lib/jquery-1.2.6.pack.js"></mce:script>
<mce:script language="java script" type="text/javascript" src="/S2SHJQuery/lib/jquery.tablesorter.js" mce_src="S2SHJQuery/lib/jquery.tablesorter.js"></mce:script>
<mce:script language="java script" type="text/javascript" src="/S2SHJQuery/lib/jquery.tablesorter.pager.js" mce_src="S2SHJQuery/lib/jquery.tablesorter.pager.js"></mce:script>

<mce:script language="java script"><!--
$(document).ready(function(){
$("#userList").tablesorter({sortList: [ [2,1]]}).tablesorterPager({container: $("#pager")});
});
// --></mce:script>
<title>jquery.tablesorter实现table排序(含分页)</title>
</head>
<body>
<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0" id="userList">
<thead>
<tr class="main-font2">
<th>Name</th>
<th>Sex</th>
<th>old</th>
</tr>
</thead>
<tbody>

<tr>
<td>李四</td>
<td>男</td>
<td>14</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>50</td>
</tr>
<tr>
<td>赵五</td>
<td>Sex</td>
<td>60</td>
</tr>
<tr>
<td>丽丽</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>蝈蝈</td>
<td>女</td>
<td>24</td>
</tr>
<tr>
<td>飞行1</td>
<td>女</td>
<td>24</td>
</tr>
<tr>
<td>飞行2</td>
<td>女</td>
<td>24</td>
</tr>
<tr>
<td>飞行3</td>
<td>女</td>
<td>24</td>
</tr>
<tr>
<td>飞行4</td>
<td>女</td>
<td>24</td>
</tr>
<tr>
<td>飞行5</td>
<td>女</td>
<td>24</td>
</tr>
<tr>
<td>飞行6</td>
<td>女</td>
<td>24</td>
</tr>
<tr>
<td>飞行7</td>
<td>女</td>
<td>24</td>
</tr>
</tbody>
</table>
<div id="pager" class="pager">
<form align="center">
每页记录数:
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>

<input type="hidden" class="pagedisplay"/>
<a href="#" mce_href="#" class="first" title="首页">首页</a> |
<a href="#" mce_href="#" class="prev" title="上一页">上一页</a> |
<a href="#" mce_href="#" class="next" title="下一页">下一页</a> |
<a href="#" mce_href="#" class="last" title="尾页">尾页</a> |
共<span class="totalpage"></span>页 |
第<span class="curpage"></span>页 |
到第 <input name="pageNo" type="text" class="pageNo txt" size="3" value=""/> 页 <a href="#" mce_href="#" class="pageGo">GO</a>
</form>
</div>
</body>
</html>



7.tablesuggest.jsp提示插件:


view plaincopy to clipboardprint?

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>搜索框提示</title>
<link rel="stylesheet" type="text/css" media="jquery.autocomplete.css"
href="css/jquery.autocomplete.css" />
<mce:script src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js"
type="text/javascript"></mce:script>
<mce:script
src="/S2SHJQuery/lib/jquery.autocomplete.js"
type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
var arr = ["Allen","Albert","Alberto","Alladin"];
$(document).ready(function() {
//$("#userList").autocomplete(arr);
$("#userList").autocomplete("show.action", { selectFirst:true,extraParams: {testvalue:function(){return $('#userList').val();}},
width: 170,minChars:1, selectOnly: 1,inputSeparator:':'});
});

// --></mce:script>
</head>
<body>
This is my JSP page.
<br>
<table >
<tbody>
<tr>
<td>提示框测试:<input type="text" name="userList" id="userList"/></td>
</tr>
</tbody>
</table>
</body>
</html>



8.table-validation.jsp验证插件:


view plaincopy to clipboardprint?

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" mce_href="css/screen.css" />
<mce:script src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js" type="text/javascript"></mce:script>
<mce:script src="/S2SHJQuery/lib/jquery.validate.js" mce_src="S2SHJQuery/lib/jquery.validate.js" type="text/javascript"></mce:script>
<mce:script src="/S2SHJQuery/lib/jquery.validate.messages_cn.js" mce_src="S2SHJQuery/lib/jquery.validate.messages_cn.js" type="text/javascript"></mce:script>
<mce:style type="text/css"><!--
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
--></mce:style><style type="text/css" mce_bogus="1">* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }</style>
<mce:script type="text/javascript"><!--
$(document).ready(function(){
//引入验证的js.jquery.validate.js,并引入中文js jquery.validate.messages_cn.js
//可在js里面进行修改,注意css格式
//获取form值后,即可根据id值来进行validation操作
//取相应的验证规则:对应的输入值即可
//可参照锋利的JQuery P218页
//同时可利用这一特性生成验证码
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 3
},
email: {
required: true,
email: true
},
url:"url",
comment: "required"
}
});
});

// --></mce:script>
</head>

<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>jquery-validation 插件jsp</legend>
<p>
<label for="cusername">用户名:</label>
<em>*</em><input id="cusername" name="username" size="25" />
</p>
<p>
<label for="cemail">邮件:</label>
<em>*</em><input id="cemail" name="email" size="25" />
</p>
<p>
<label for="curl">URL:</label>
<em> </em><input id="curl" name="url" size="25" value="" />
</p>
<p>
<label for="ccomment">评论:</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22">




Struts2下使用jsonplugin及jquery完成ajax功能

1. 从以下网址[url]http://code.google.com/p/jsonplugin/downloads/list[/url]下载JSON插件的JAR包(新版本是0.32),并加到工程的相应目录下。从如下网址[url]http://docs.jquery.com/Downloading_jQuery[/url]下载jquery所需文件。(建议下载稳定版本,不然会出现莫名其妙的错误)
2. 配置相应的xml文件,为ajax请求提供数据:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="sajax" extends="json-default" namespace="/book">
<action name="getAjaxBookChannelList" method="getAjaxBookChannelList" class="bookChannelAction">
<result type="json" />
</action>
<action name="getAjaxBookCategoryListByChannelID" method="getAjaxBookCategoryListByChannelID" class="bookChannelAction">
<result type="json" />
</action>
</package>
</struts>
配置有两处与通常的action配置不同,一处是扩展了json-default, json-default”是在jsonplugin-0.30.jar包里的struts-plugin.xml中定义的,文件内容如下:
<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
<package name="json-default" extends="struts-default">
<result-types>
<result-type name="json" class="com.googlecode.jsonplugin.JSONResult"/>
</result-types>
<interceptors>
<interceptor name="json" class="com.googlecode.jsonplugin.JSONInterceptor"/>
</interceptors>
</package>
</struts>

另一处是定义了返回类型为json<result type="json" />,会将response中的返回数据转化为json对象。
3.在Action中的定义。定义返回对象,并添加get,set方法。返回的数据可以根据需要格式成json形式(json格式如{1:test,2:test}),比如为二级列表提供填充内容的的数据,在页面需要进行遍历,做成json形式的,在页面遍历时也会比较方便。Action代码(部分)如下:

public String getAjaxBookChannelList() {
StringBuffer sb = new StringBuffer();
bookChannelList = bookService.getBookChannelList();
if (bookChannelList.size() > 0) {
int j = bookChannelList.size();
sb.append("{");
for (int i = 0; i < j; i++) {
BookChannel bc = (BookChannel) bookChannelList.get(i);
sb.append(bc.getId());
sb.append(":");
sb.append("\"");
sb.append(bc.getName());
sb.append("\"");
if (i != (j - 1))
sb.append(",");
}
sb.append("}");
}

strAjaxChannel = sb.toString();//返回的数据

return Action.SUCCESS;
}


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>


直接访问[url]http://manager.17k.com/book/getAjaxBookChannelList.action[/url]
得到如下内容:
{"ajaxBookCategoryListByChannelID":"success","ajaxBookChannelList":"success","bcID":0,"bchID":0,"bookCategory":null,"bookCategoryAllList":null,"bookCategoryByChannelID":"success","bookCategoryByID":null,"bookCategoryList":null,"bookCategoryListModel":null,"bookChannel":null,"bookChannelList":[{"createdate":"2008-07-09T10:23:36","id":1,"name":"畅销经典","prefix":"changxiao","status":0},{"createdate":"2008-07-09T10:24:03","id":2,"name":"玄幻奇幻","prefix":"yy","status":0},{"createdate":"2008-07-09T10:24:25","id":3,"name":"都市娱乐","prefix":"dushi","status":0},{"createdate":"2008-07-09T10:24:38","id":4,"name":"历史军事","prefix":"ss","status":0},{"createdate":"2008-07-09T10:24:54","id":5,"name":"女性时尚","prefix":"nvxing","status":0},{"createdate":"2008-07-09T10:25:11","id":6,"name":"游戏竞技","prefix":"dongman","status":0},{"createdate":"2008-07-09T10:25:24","id":7,"name":"恐怖灵异","prefix":"kongbu","status":0},{"createdate":"2008-07-09T10:25:35","id":8,"name":"文化社科","prefix":"www","status":0},{"createdate":"2008-07-09T10:25:46","id":9,"name":"经管励志","prefix":"www","status":0}],"channelID":0,"currentPage":0,"info":"","msg":"","pageSize":0,"srcID":0,"strAjax":"","strAjaxCategory":"","strAjaxChannel":"{1:\"畅销经典\",2:\"玄幻奇幻\",3:\"都市娱乐\",4:\"历史军事\",5:\"女性时尚\",6:\"游戏竞技\",7:\"恐怖灵异\",8:\"文化社科\",9:\"经管励志\"}","tarID":0,"theBookCategory":"success","theBookChannel":"success","toID":0}




关于jsonplugin序列化的几点:
a.对于不想被序列化的属性,可以在他的get方法前加注释: @JSON(serialize=false)
b.对于想改变json结果属性名称的,可以在他的get方法前加注释@JSON(name="属性名")
c. 带有transient修饰符与没有Getter方法的字段(field)都不会被串行化为JSON。


对于struts2下jsonplugin、jquery的使用,我也不太熟悉,大家一起学习吧。


参考资料:

Struts 2与AJAX
[url]http://hi.baidu.com/clking419/blog/item/503abb18079b250535fa41b5.html[/url]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值