使用jQuery的load事件时,调用的具体格式为:
load( url, [data], [callback] )
具体参数的含义如下:
url (String): 装入页面的URL地址
params (Map): (可选)发送到服务端的键/值对参数,传递参数的格式为:{"ID": id }
callback (Function): (可选) 当数据装入完成时执行的函数
params (Map): (可选)发送到服务端的键/值对参数,传递参数的格式为:{"ID": id }
callback (Function): (可选) 当数据装入完成时执行的函数
其中Function包含的参数如下:
function (responseText, textStatus, XMLHttpRequest) {}
responseText代表请求返回的内容
textStatus代表请求的状态,其值可能为:success,error,notmodify,timeout 4种
XMLHttpRequest对象
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);
之后加载,在这之前加载是无效的,加载的元素必须重新注册自己的事件处理程序。