Struts2 + jquery

废话不多说,直接示例:

首先当然要搭建好struts2的开发环境,为了使用json数据格式,要导入struts2的一个json插件包,

我用的是struts2.1.8其解压后的在解压文件的lib目录下可找到这个json插件包struts2-json-plugin-2.1.8.1.jar

我的目录结构

src--

|---com.sun.jsondemo(package)

||----JsonPluginAction.java

     |---struts.xml

WebRoot--

|---js(folder)

||----jquery-1.4.js

|---WEB-INF

|----lib(项目所需jar包)

|----page

                     |---book.jsp

JsonPluginAction.java:

packagecom.sun.jsondemo;

importjava.util.ArrayList;

importjava.util.List;

importorg.apache.struts2.json.annotations.JSON;

importcom.opensymphony.xwork2.ActionSupport;

publicclassJsonPluginActionextendsActionSupport{

/**

*

*/privatestaticfinallongserialVersionUID=1L;

privateintbookid;

privateStringtitle;

privatedoubleprice;

privateList<String>comments;//secret1和secret2没有提供setter和getter方法,不会返回为json格式

privatetransientStringsecret1;//这个关键字表示这个field不会持久化

privateStringsecret2;@JSON(name="ISBN")//可以通过注解方式改变json对象中属性的名称

publicintgetBookid(){returnbookid;}

publicvoidsetBookid(intbookid){this.bookid=bookid;}

publicStringgetTitle(){returntitle;}

publicvoidsetTitle(Stringtitle){this.title=title;}

publicdoublegetPrice(){returnprice;}

publicvoidsetPrice(doubleprice){this.price=price;}

publicList<String>getComments(){returncomments;}

publicvoidsetComments(List<String>comments){this.comments=comments;}

@Override

//我们在这里简单的给定一些值,实际当然从页面动态获取

publicStringexecute()throwsException{

bookid=111111;

title="struts-json-jqueryintegration";

price=99;

comments=newArrayList<String>(3);

comments.add("It'snobad");

comments.add("WOW");

comments.add("Nocomment!");

secret1="Youcan'tseeme";

secret2="Iaminvisible";

returnSUCCESS;

}

 }

struts2.xml:

<struts><constantname="struts.enable.DynamicMethodInvocation"value="false"/><constantname="struts.devMode"value="true"/><constantname="struts.ui.theme"value="simple"></constant>

<!--json-default定义在struts2的json插件包中,它包括了struts-default--><packagename="demo"namespace="/jsondemo"extends="json-default"><actionname="JsonPlugin"class="com.sun.jsondemo.JsonPluginAction"><!--这里type为json,表示action中的属性将以json对象的格式输出-->

<resulttype="json"/></action><actionname="GetJsonData"><resulttype="dispatcher">/WEB-INF/page/book.jsp</result></action></package></struts>

如果我们到此为止,通过浏览器访问http://localhost:8080/struts2demo/jsondemo/JsonPlugin.action

浏览器则会提示下载文件把文件打开后里面就是json的数据格式

    {"ISBN":111111,"comments":["It's no bad!","WOW!","No                                                         comment!"],"price":99,"title":"struts-json-jquery integration"}

这样肯定是不能干活的,但是到这里也算是成功的一半了。下面来个book.jsp通过jquery中的$.getJSON()函数:

<html>

<head>

<title>MyJSP'global.jsp'startingpage</title>

<metahttp-equiv="pragma"content="no-cache">

<metahttp-equiv="cache-control"content="no-cache">

<metahttp-equiv="expires"content="0">

<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/jquery-1.4.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$("#showbook").click(function(){

varbasepath=$("#basepath").val();

vardetail=$("#detail");

$.getJSON(basepath+"/jsondemo/JsonPlugin.action",

{t:newDate()},

function(data){

varisbn=data.ISBN;

vartitle=data.title;

alert(title);

varprice=data.price;

detail.append("ISBN:"+isbn+"<br/>"+

"Title:"+title+"<br/>"+

"Price:"+price+"<br/>");

detail.append("Comments:"+"<br/>"+"<hr>"+"<br/>");

varcomments=data.comments;

for(vari=0;i<comments.length;i++){

detail.append("<p>"+"#"+(i+1)+""+comments[i]+"</p><br>");

}

});

});

});

</script>

</head>

<body>

<inputid="basepath"type="hidden"value="${pageContext.request.contextPath}">

<inputid="showbook"type="button"value="RetrieveBook">

<divid="detail"></div>

</body>

</html>

完成了,到这里我们通过http://localhost:8080/struts2demo/jsondemo/GetJsonData.action就可以访问到

book.jsp页面,点击button就能在页面上看到反回的数据,这里其实主要涉及到json数据的解析。我对jquery也刚刚

开始研究,所以这里写的js代码肯定不够优美....

呵呵,如果有不正确的地方请大家指出!

相关推荐