文档详情

《Struts2_+_JQuery_+_JSON实现AJAX》.doc

发布:2015-10-20约字共6页下载文档
文本预览下载声明
Struts2 + JQuery + JSON实现AJAX网上关于这方面的资料也不少,但多半是struts1的,在Struts2中使用JSON可以更容易实现数据的异步传输。 ????? 先做好准备工作: ????? 1.Struts2相关lib, 注意将struts2 lib下面的以json开头的包也加入到工程。 ????? 2.JSON Plugin,它可以将Struts2 Action中的结果直接返回为JSON。下载地址:/files/jsonplugin-0.34.jar?(支持struts2.1.6及以上版本)。 ????? 3.JQuery,JS的一个lib. 下载地址:?(最新版本为1.3.2)。 ? ????? 准备工作都做好之后,我们可以开始了。建一个WEB工程,把相关的包加入到工程。我们需要做的就是三件事: ????? 一、准备一个JSP页面用于提交ajax请求,这里我使用了JQuery的$.getJSON(url,params,function callback(data))函数提交ajax请求到指定url,并且携带参数params,最后用一个回调函数callback处理请求返回结果data; ????? 二、一个处理请求的Action类,并在struts.xml文件中做相应配置:写一个action类处理ajax请求数据,并将返回结果封装成一个JSONObject对象返回给请求页面。同时在struts.xml中配置对应action,指明其返回类型为json并使其package的extends为json-default,并将要返回请求页面的数据放在名为root的param中,如param name=rootresult/param。 ????? 三、接受请求返回结果:使用JS的eval方法将返回结果data转换成JSON对象,并处理返回结果。 ???? ? ? 具体参见以下代码: ??? // login.jsp 使用getJSON方法提交ajax请求,并处理请求返回结果。注意请求的url为login.html这是因为我将struts2.preperties中的struts.action.extension改成了htm,默认为action。l Html代码 %@?page?language=java?contentType=text/html;?charset=UTF-8?? ????pageEncoding=UTF-8%?? %@?taglib?uri=/struts-tags?prefix=s%?? !DOCTYPE?html?PUBLIC?-//W3C//DTD?HTML?4.01?Transitional//EN?/TR/html4/loose.dtd?? html?? head?? meta?http-equiv=Content-Type?content=text/html;?charset=UTF-8?? titles:text?name=page.title.login?//title?? script?type=text/javascript?src=jquery-1.3.2.js/script?? script?type=text/javascript?language=javascript?? $(document).ready(function(){ ?? ????$(#login).click(function(){ ?? ????????login(); ?? ????????}); ?? }); ?? ?? function?login(){ ?? ????var?url?=?login.html; ?? ????var?params?=?{user.logName:$(#name).attr(value),user.password:$(#password).attr(value)}; ?? ???? ?? ????$.getJSON(url,params,function?callback(data){ ?? ????????//?convert?to?json?object ?? ????????var?user?=?eval((+data+));// ?? ???????? ?? ???????? ?? ????????$(#result).each(function(){ ?? ????????????$(this).html(welcome?,?+?); ?? ????????????}); ?? ????????}); ?? ????} ?? /script?? /head?? body?? s:actionmessage/?? form??method=post?
显示全部
相似文档