如何知道主体中的哪个元素触发了jQuery中的AJAX请求

问题描述：

我正在开发一个应用，并尝试将Facebook行为用于AJAX请求.在Facebook中，您会在触发AJAX请求的图标旁边看到一个漂亮的加载图像.好吧，如果页面中有1-2个元素，则实现起来非常简单.

I'm working on an app and trying to use the Facebook behavior for an AJAX request. In Facebook you get a nice loading image next to the icon which triggers the AJAX request. Well, it's pretty simple to implement if you have 1-2 elements in the page.

我想使其通用，并且希望每当任何元素触发AJAX请求时，我都希望在其旁边显示一个小的GIF.为此，我认为jQuery的AjaxSend事件就足够了，但是可惜的是，它并没有给我提供触发AJAX调用的对象的句柄.我想知道是否可以通过jQuery的某种方法来知道哪个元素触发了AJAX调用，并且还可以在AJAX调用完成时获得相同的句柄.

I want to make it generic and would like that whenever any element triggers an AJAX request, I want to show a small GIF next to it. For this, I thought the AjaxSend event of jQuery would be good enough, but alas it doesn't give me a handle of the object which triggered the AJAX call. I would like to know if it is possible via some method of jQuery to know which element triggered the AJAX call and also to get the same handle when the AJAX call is completed.

如果您认为我的问题解决方法不正确，我很想听听您的建议.

If you feel my approach to the problem is not correct, I would love to hear your suggestions.

答

如果要使用ajax请求处理程序，则需要(手动或自动)将ID分配给触发事件的元素.然后，您可以在请求(element_id:THEID)中将此ID作为附加键值对发送，并在ajax请求处理程序中使用各种子字符串方法进行抓取.

If you want to use the ajax request handlers, an id will need to be assigned (manually or automatically) to the element that triggered the event. You could then send this id as an additional key-value pair in the request (element_id:THEID) and grab it with various substring methods in the ajax request handlers.

示例:

<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" />

另一种方法是在每个事件处理程序中处理加载图像的出现和消失(但我似乎了解您有太多?)，如下所示:

The alternative is handling the appearing and disappearing of the loading image in each event handler (but I seem to understand you have too many of them?), like this:

<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>

如何知道主体中的哪个元素触发了jQuery中的AJAX请求

相关推荐