没有合适的资源?快使用搜索试试~ 我知道了~
首页Struts2整合jQuery实现Ajax功能.doc
资源详情
资源评论
资源推荐
Struts2 整合 jQuery 实现 Ajax 功能
技术领域很多东西流行,自然有流行的道理,这几天用了 jQuery,深感有些人真是聪明绝顶,能将那
么多技术融合的如此完美。
首先明确个概念:
jQuery 是什么:是使用 javascript 语言开发的,用于满足项目前台各种操作需要的 js 程序文件。也就是
说,jQuery 基本上就是个 js 程序集,基础核心是 jQuery.js 文件。
当然根据不同的版本具体的表现形式:
jQuery.1.6.js 或者 jquery-1.5.1.js
这个是版本号的不同,具体有哪些区别,还没发现。
还有这种形式
jquery-1.5.1.min.js(紧缩格式,取消回车,一行代码)
根据应用需求的不同,jQuery
1 引入 jQuery
项目中引入 jQuery
下载 jQuery:http://docs.jquery.com/Downloading_jQuery
添加核心文件:将核心的 jQuery 文件复制到项目中。
<SCRIPT type="text/javascript" src="js/jquery/jquery-1.6.js"></script>
<SCRIPT type="text/javascript">
function checkkey()
{
…………使用 jQuery 技术自定义的代码…………
}
</SCRIPT>
2 jQuery 的 Ajax
jQuery 的内容非常庞杂,可以解决诸多方面的需求,主要包括:Ajax,页面效果,页面验证。
作为 J2ee 项目,我主要关注了一下 Ajax 和页面验证。
jQuery 的 Ajax 很简单,仅仅使用核心文件 jQuery.js 就可以实现了。
函数 描述
jQuery.ajax()
执行异步 HTTP (Ajax) 请求。
jQuery.get()
使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()
使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.post()
使用 HTTP POST 请求从服务器加载数据。
有关 Ajax 的方法有很多,这 里只简单研究 了三种(其实 就一种 jQuery.ajax()),其它的都是
jQuery.ajax()的简写形式。
具体格式,上述网站说的已经非常清楚了,记住如下格式就可以。
$.ajax({
type: 'POST', //提交方法
url: url, //提交的地址
data: data, //提交的参数
success: success, //成功后,回调的函数名
dataType: dataType //返回的数据类型
});
示例:
post 的示例:使用 ajax()的简化格式 post()方法:中间有三个参数:url,data(json 格式),回调
函数(回调函数可以定义在他处,此处仅写函数名)
$.post("test.jsp",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
3 Struts2 整合 jQuery
Struts2 中主要的业务操作都是通过 Action 来完成的,此时就需要 jQuery 来访问 Struts2 的 Action。
$.post("Action", ……)
3.1 Login.jsp 页面:
功能:用户登录,
首先需要输入公
司标识码:
正确:显示对勾;
错误:显示红叉;
jQuery 代码:
<SCRIPT type="text/javascript" src="js/jquery/jquery-1.6.js"></script>
<SCRIPT type="text/javascript">
function checkkey(){
var url = 'getKeyExist';
var params = {companyKey:$('#ckey').attr('value')};
$('#warn').html("<img src='image/ajax/wait.gif'/>");
jQuery.post(url, params, callbackFun);
}
function callbackFun(data){
$('#warn').html(data);
}
</SCRIPT>
HTML:当文本框失去焦点时,触发回调事件。
<DIV class=line><LABEL class=big id=lblName>公司标识</LABEL>
<INPUT id='ckey' name="ckey" onblur="checkkey();"><span id="warn"></span>
</DIV>
说明:
当文本框‘ckey’失去焦点时:调用“checkkey”函数;
“checkkey”函数分别确定两个信息:
异步访问:'getKeyExist'——判断标识是否正确的 Action 类。
参数:{companyKey:$('#ckey').attr('value')},一个以 json 格式拼写的参数。
注:Json 的对象格式:
发出异步请求:jQuery.post(url, params, callbackFun);
3.2 Action 代码:
传统的 Action 都是返回 String,根据 String 的不同决定 forward 到不同的 Jsp 页面,这给 Ajax 带来麻烦。
我当初还是走了些弯路。
3.2.1 通过 Jsp 得到回调信息
繁琐,意义不打, 删去/略 !
3.2.2 Action 自主完成响应(即 自己完成结果对象的 Json 串行化,然后写入 HttpServletResponse ):
后来发现,Action 也可以自主完成响应,不需要 Jsp 的支持。代码修改如下:
Action:新建了个方法 getKeyExist,不提供返回值。
if(complist.size()>0)
remessage="<img src=’image/ajax/yes.gif’/> ";
else
remessage="<img src=’image/ajax/no.gif’ /> ";
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.getWriter().write(remessage);
struts.xml:重新建立了无结果 result;
<action name="getKeyExist" class="ResponseMessageAction" method="getKeyExist">
</action>
此时得到的响应就简单干净了很多。
上述方法已经可以得到响应的信息,但是在很多情况下,还需要对响应的结果进行区分,来决定不同
的显示效果,此时,响应值就要携带更多的信息,也就是说不是简单的一个字符串,而是一个对象。那么
使用 Json 格式相对来说就比较方便(3.1 提到了 Json 的对象格式)。
Action:响应信息改为 json 格式;
if(complist.size()>0){
remessage="{type:'yes',show:'<img src=\"image/ajax/yes.gif\" />'}";
}
else{
remessage="{type:'no',show:'<img src=\"image/ajax/no.gif\" />'}";
}
jQuery:回调结果
function callbackFun(data){
eval('json=' + data + ';'); //自己解析 Json 响应数据
if(json.type=='no'){
$('#ckey').focus();
}
$('#warn').html(json.show);
}
3.2.3 Action 利用 struts2-json-plugin-X.X.X.jar 响应 Json 格式信息:
1. function removerecordbyid(recordid){
2. $("#showallrecordtabletr" ).each(
3. function (){
4. var seq=parseInt($( this ).children( "td" ).html());
5. var thisrecord= this ;
6. if (seq==recordid)
7. if (confirm( "您确认执行删除操作么?" )){
8. $.ajax({
9. type:"POST" ,
10. url:"removeRecordById.action" ,
11. dataType:"json" ,
12. data:{"msg.id" :recordid},
13. success:function (json){
14. if (json.status==4){
15. alert("删除失败,只有提交留言的 ip 才能删除" );
16. }else {
17. $(thisrecord).remove();
18. //alert("删除成功");
19. }
20. },
21. error:function (){
22. alert("delerror" );
23. }
24. });
25. }
26. });
27. }
Action 代码(做了简化)
1. public class CrudMsgAction extends ActionSupport{
2. private Recordmsg;
剩余16页未读,继续阅读
kongx73
- 粉丝: 0
- 资源: 5
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- 2022年中国足球球迷营销价值报告.pdf
- 房地产培训 -营销总每天在干嘛.pptx
- 黄色简约实用介绍_汇报PPT模板.pptx
- 嵌入式系统原理及应用:第三章 ARM编程简介_3.pdf
- 多媒体应用系统.pptx
- 黄灰配色简约设计精美大气商务汇报PPT模板.pptx
- 用matlab绘制差分方程Z变换-反变换-zplane-residuez-tf2zp-zp2tf-tf2sos-sos2tf-幅相频谱等等.docx
- 网络营销策略-网络营销团队的建立.docx
- 电子商务示范企业申请报告.doc
- 淡雅灰低面风背景完整框架创业商业计划书PPT模板.pptx
- 计算模型与算法技术:10-Iterative Improvement.ppt
- 计算模型与算法技术:9-Greedy Technique.ppt
- 计算模型与算法技术:6-Transform-and-Conquer.ppt
- 云服务安全风险分析研究.pdf
- 软件工程笔记(完整版).doc
- 电子商务网项目实例规划书.doc
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论1