如何知道正文中的哪个元素在jQuery中触发了AJAX请求

Question

我正在开发一个应用程序并试图将Facebook行为用于AJAX请求.在Facebook中,您可以在触发AJAX请求的图标旁边获得一个很好的加载图像.嗯,如果页面中有1-2个元素,那么实现起来非常简单.

我想让它变得通用,并希望每当任何元素触发AJAX请求时,我想在它旁边显示一个小GIF.为此,我认为jQuery的AjaxSend事件已经足够好了,但是它没有给我一个触发AJAX调用的对象的句柄.我想知道是否可以通过jQuery的某些方法知道哪个元素触发了AJAX调用,并且在AJAX调用完成时也获得相同的句柄.

如果您觉得我对问题的解决方法不正确,我很乐意听取您的建议.

Answer 1

另一种需要最少设置的通用方法是使用activeElement事件目标的属性:

$(document).ajaxStart(function (e) {
    try {
        var $el = $(e.target.activeElement);
        var isButton = $el.hasClass('btn');

        // just a precautionary check
        if (!isButton) {
            return;
        }

        $el.button('loading'); // or whatever else you want to do

    } catch (ex) {
        console.log(ex);
    }
});

$(document).ajaxStop(function (e) {
    try {
        var $el = $(e.target.activeElement);
        var isButton = $el.hasClass('btn');

        if (!isButton) {
            return;
        }

        $el.button('reset');

    } catch (ex) {
        console.log(ex);
    }
});

这样做的原因是因为当单击一个按钮时,它会获得焦点.而且e.target(document在这一点上,它通过activeElement属性告诉我们当前关注的元素.

请注意,这try...catch是完全可选的.包装任何全局处理程序通常是一个好主意,try...catch以确保此处的任何异常不会导致任何副作用.这console.log将告诉您有关异常的信息(如果有),以便您以后可以修复它.

Answer 2

如果要使用ajax请求处理程序,则需要(手动或自动)将id分配给触发事件的元素.然后,您可以将此id作为请求中的附加键值对(element_id:THEID)发送,并使用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, 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);
        }

        $("#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>