1

我正在这个网站上开发一个基于 ajax 的网站，我已经通过 ajax 调用记录了所有请求的页面。经过一个小时的搜索，我得到了一个 Histroy.js 库来管理我的状态。但我的问题是获取调用 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 请求的元素？

4

2 回答 2

0

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

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

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

$('a[href]');

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

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

并设置链接'onclick'返回false，这样当你点击链接时你不会被转移到一个站点，转移可以由javascript处理。

但是，我以前从未这样做过，这只是我对这个主题的快速想法。希望它可以有所帮助。

于 2012-12-03T08:48:02.460 回答
0

据我了解，您的问题是将对象传递给其他函数。

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

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

<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 要求的操作之前传播该操作。

于 2012-12-03T09:17:08.237 回答