我正在开发一个应用程序,并尝试使用Facebook行为来实现
AJAX请求.在Facebook中,您可以在触发AJAX请求的图标旁边看到一个不错的加载图像.那么,如果页面中有1-2个元素,那么实现起来很简单.
我想使它成为通用的,并希望当任何元素触发AJAX请求时,我想在其旁边显示一个小GIF.为此,我认为jQuery的AjaxSend事件将会很好,但是它不会给我触发AJAX调用的对象的句柄.我想知道是否可以通过jQuery的一些方法知道哪个元素触发AJAX调用,并且在AJAX调用完成时也可以获得相同的句柄.
如果你觉得我对这个问题的解决方法是不正确的,我很乐意听到你的建议.
解决方法
如果要使用ajax请求处理程序,则需要将一个id(手动或自动)分配给触发事件的元素.然后,您可以在请求(element_id：THEID)中作为附加键值对发送此ID,并在ajax请求处理程序中使用各种子字符串方法.
例：
<script type="text/javascript">
$(document).ready(function(){
$("input").click(function(){
var newid = (create a custom id with date and time);
$(this).attr("id",newid);
$.post("handler.PHP",{element_id : $(this).attr("id")});
});
}).ajaxSend(function(e,xhr,settings){
var start_position = settings.data.indexOf("element_id");
var equalsign_position = settings.data.indexOf("=",start_position);
var ampersand_position = settings.data.indexOf("&",start_position);
var element_id;
if(ampersand_position == -1){
element_id = settings.data.substr(equalsign_position+1);
} else {
element_id = settings.data.substr(equalsign_position+1,ampersand_position-equalsign_position-1);
}
$("#"+element_id).after("<div id='div"+element_id+"'><img src='loading_start.png' /></div>");
}).ajaxComplete(function(e,settings) {
var start_position = settings.data.indexOf("element_id");
var equalsign_position = settings.data.indexOf("=",ampersand_position-equalsign_position-1);
}
$("#div"+element_id).remove();
});
</script>
<input type="button" value="Save" />
另一种方法是处理每个事件处理程序中加载映像的出现和消失(但是我似乎明白你们中有太多的内容),就像这样：
<script type="text/javascript">
$(document).ready(function(){
$("input").click(function(){
var element_id = (generate custom id);
$(this).after("<div id='div"+element_id+"'><img src='loading_start.png' /></div>");
$.post("handler.PHP",{var:"hello"},function(){
$("#div"+element_id).remove();
});
});
})
</script>
