Question

我正在这个网站上开发一个基于ajax的网站我通过ajax调用创建了所有请求页面的历史记录。经过一个小时的搜索，我得到了一个Histroy.js lib来管理我的状态。但我的问题是获取调用ajax并仅更新div块的元素。所以我想要这样的东西。

<a href="a.php" class="ajax" data-block-to-update="a_block"> 
<div id="a_block">

当用户点击此链接时，应该进行ajax调用，在获得响应后我必须更新id为“a_block”的div

这是我的脚本

<script>
    $(document).ready(function(){
        var History = window.History;
        var State = History.getState();
        var $log = $('#log');

        History.pushState({state:'1',rand:Math.random(),content:$('#main').html(),block:'main'}, 'index', State.url);
        //History.log(State.data, State.title, State.url);

        $('.ajax').live('click',function(){
        var gen_url = $(this).attr('href');
        var bl = $(this).attr('data-block');
            $.ajax({
                url: gen_url,
                success: function(data) {
                    console.log($(this));
                  $('#'+bl).html(data);
                  History.pushState({state:gen_url,rand:Math.random(),content:data,block:bl}, gen_url, gen_url);
                }
                  });
        return false;
        });

        $.ajaxSetup({

              });

        $(document).bind("ajaxComplete", function(e, xhr, settings){
                            // need to get element which make ajax request
            console.log(xhr);
            //var obj = $(e.target.activeElement);
            //alert(obj.attr('data-block'));

        });

        History.Adapter.bind(window, 'statechange', function() {
            var State = History.getState();
            if(State.data.content!="" && State.data.block!="")
            {
                //History.log(State.data, State.title, State.url);
                $('#'+State.data.block).html(State.data.content);
            }
            else
                return false;
        });
    });

</script>

如何在“ajaxComplete”事件处理程序中获取调用ajax请求的元素？

Answer 1

如果我理解你的话，我可以想到两种解决方法，一种比另一种更优雅。

第一个是拥有一个捕获所有数据的php文件，因为你使用的是jQuery，我会使用http://api.jquery.com/jQuery.post/。

你的问题有点分散，你想收集什么信息，如果你想要href数据，我会写这样的东西收集所有元素：

$('a[href]');

您可以使用bind添加事件侦听器： http://api.jquery.com/bind/

$('a[href]').bind('click', function()
{
    saveHistory();
    document.location = this.href;
});

并设置链接'onclick'以返回false，在这种情况下，当您点击链接时，您不会转移到网站，转移可以由javascript处理。

然而，我以前从未这样做过，这只是我对这个问题的快速思考。希望它可以得到一些帮助。

Answer 2

根据我的理解，你的问题是将对象传递给另一个函数。

如果是这样，您需要在第一个函数之外声明一个变量，并使用该函数将数据保存在该变量中。在函数中初始化的所有变量都将在其末尾删除。

在您的情况下，我会说您的代码只有一点变化：

<script>
$(document).ready(function(){
    var ajax_element;
    // Do all you need as before…

    $('.ajax').live('click',function(){
    ajax_element = $(this);
    var gen_url = $(this).attr('href');
    var bl = $(this).attr('data-block');
        $.ajax({
            url: gen_url,
            success: function(data) {
                console.log($(this));
              $('#'+bl).html(data);
              History.pushState({state:gen_url,rand:Math.random(),content:data,block:bl}, gen_url, gen_url);
            }
              });
    return false;
    });
    // Etc…

    $(document).bind("ajaxComplete", function(e, xhr, settings){
        // need to get element which make ajax request ->
        // the element you want to catch here is: ajax_element
        console.log(xhr);
        //var obj = $(e.target.activeElement);
        //alert(obj.attr('data-block'));

    });
})
</script>

在完成ajax调用之前，您仍然需要保持第二个函数不会触发。我建议你创建一个你可以在你的ajax成功函数中调用的函数，以确保它不会被提前触发（如果它必须在之后被触发）。

此外，当我使用链接时，我建议从一开始就阻止正常的事件传播，有些浏览器会在执行JS提出的操作之前传播操作。

我怎样才能获得调用ajax请求的源元素＆＃34; ajaxComplete＆＃34;处理器

2 个答案: