Question

我对使用Ajax和历史记录中的以下问题感到困惑：

规格：

我有一个页面使用Ajax调用另一个页面。
现在加载的页面有数据表，其中使用Ajax来获取数据（截至目前为止2个ajax调用）
我使用history.js进行页面导航，它使用常见的ajax调用来加载页面div中的内容

现在，我面临以下问题：

对于第一个数据表页面调用，我得到一个ajaxcall。
令人惊讶的是，当我使用历史记录导航到另一个页面并调用数据表页面时，ajax调用现在加倍。它以线性方式继续。

这是我在使用ajax加载页面时遇到的一个新问题，其中包含Ajax调用。这个问题的主要原因是什么？另外，这个问题的解决方案是什么？

我的常用代码如下所示：

<script>
var index=function(url,update_id,state){
        $.ajax({
          url: url,
        }).done(function(data) {
            $("#"+update_id).html('');
            $("#"+update_id).html(data);
            if(state == 1){
                history.pushState({url: url,id:update_id},"name",url);
            }
        });
    }
jQuery(document).ready(function($) {
    $(document.body).on('click','.link_click',function(){
        var url = $(this).attr('href');
        var update_id = $(this).attr('update_id');
        index(url,update_id,1);
    })
});

window.addEventListener('popstate', function(event) {
    if(event.state.url != null){
        index(event.state.url,event.state.id);
    }
});
</script>

我的链接如下：

<a href="/page1/index" onclick = "return false;" update_id="new" class="link_click">My Contact</a>

我正在使用这个通用代码来链接每个页面使用Ajax和历史记录

Answer 1

您是否正在为项目使用框架？在使用Yii Framework之前，我注意到了类似的行为。我注意到的是，如果使用静态Id创建对象，则会导致ajax调用次数的增加。

尝试为对象提供唯一ID，以便事件不会被阻塞。

Answer 2

只是一个想法：是否有任何机会加载Ajax的页面是否会再次点击“link_click”-links上的点击事件？

如何使用Ajax动态加载页面＆amp;历史？

2 个答案: