jQuery使用load函数访问Struts2中的Action实现局部刷新和注册事件
本文由发表于6年前 | Javascript | 评论数 1 |  被围观 15,420 views+

使用jQuery的load事件时,调用的具体格式为:

load( url, [data], [callback] )

具体参数的含义如下:

url (String): 装入页面的URL地址
params (Map): (可选)发送到服务端的键/值对参数,传递参数的格式为:{"ID": id }
callback (Function): (可选) 当数据装入完成时执行的函数

其中Function包含的参数如下:

function (responseText, textStatus, XMLHttpRequest) {}
responseText代表请求返回的内容
textStatus代表请求的状态,其值可能为:success,error,notmodify,timeout 4种
XMLHttpRequest对象

下面是一个使用load事件的例子,这个例子在页面加载<div class="index_question_div">时自动触发load方法,load方法对应的三个参数分别为:
url:调用Ajax请求,这里是请求访问服务器端的 admin/Share-getQuestionList.action
params:这个是可选参数,这里没有给出
callback:回调函数function(responseText,textStatus,XMLHttpRequest),把返回的数据加入div中。

HTML代码:
<div class="index_question_div"></div>
jQuery代码:
$(".index_question_div").load("admin/Share-getQuestionList.action", function(responseText,textStatus,XMLHttpRequest) {
	$(".index_question_div").html(responseText);
        $(".index_question_div").fadeIn("slow");   

	$('.question_unit').hover(function(event){
		$(this).addClass('question_unit_select');
	},function(){
		$(this).removeClass('question_unit_select');
	});

	$('.read_more_arrow').hover(function(event){
		$(this).addClass('read_more_arrow_hover2');
	},function(){
		$(this).removeClass('read_more_arrow_hover2');
	});

	$('.read_more_arrow').click(function(event){
		$(this).next().slideToggle("slow");
	});
});
这个例子中服务端返回的responseText为:
<s:iterator value="questions" var="q">
	<div class="question_unit">
		<div class="quesion_unit_photo">
			<img src="<s:property value="#q.questionUploader.userPhoto"/>" class="unit_photo_img" />
		</div>
		<!--quesion_unit_photo-->
		<div class="question_unit_content">
			<div class="unit_content_author"><b><s:property value="#q.questionUploader.userName"/></b>(jQuery)</div>
			<div class="unit_content_detail"><s:property value="#q.questionContent"/></div>
			<div class="unit_content_time"><s:property value="#q.questionTime"/></div>
		</div>
		<!--end of question_unit_content-->
		<div class="content_read_more">
			<div class="read_more_arrow"></div><div class="more_tips"><div><s:property value="#q.questionUploader.userName"/> </div></div>
		</div>
	</div>
	<!--end of question_unit-->
</s:iterator>

注意这里使用load局部刷新获取的元素的事件只能在
$(".index_question_div").html(responseText);
之后加载,在这之前加载是无效的,加载的元素必须重新注册自己的事件处理程序。

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/struts2-using-the-load-function-to-access-jquery-in-action-to-achieve-partial-refresh-and-up-event.html
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 5/28
文章评论
    一条评论
  1. Jimbo 2011年06月22日05:22:01  #-49楼 回复 回复

    That’s not just the best aswenr. It’s the bestest answer!

给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 C++语法笔记 – C++程序的结构 2011/9/3
2 Java Web笔记 – 客户端Javascript与服务器端Servlet的验证 2011/11/10
3 Javascript笔记 – 面向对象的Javascript编程 2012/5/31
4 Java笔记 – 数组 一维数组 多维数组 数组与泛型 数组实用功能 2014/3/14
5 ExtJS让被遮盖的窗体显示在最前面以及解决Ext.MessageBox提示框被TabPanel覆盖的方法 2011/7/28
6 SQL语句实用例子 MySQL编码设置 2011/10/13
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.