Question

我正在创建一个用户可以单击链接的页面，$ .ajax将内容加载到容器div中。问题是源文件都有自己的$ .ajax请求，因此当用户点击2个或更多链接时，它开始增加$ .ajax请求的数量，并且容器div被数据溢出。基本上我的目标是让用户单击一个链接并加载所请求的页面（并从ajax加载的源开始刷新$ .ajax）。当他们点击另一个链接时，它会清除之前加载ajax的内容中的旧$ .ajax请求。

$(function(){
                $("a.text").click(function(){
                    $("#botscontainer").remove();
                    $("#botsparent").append("<div id=\"botscontainer\"></div>");
                    $.ajax({
                      url: $(this).attr("id") + ".html",
                      cache: false,
                      success: function(data){
                        $("#botscontainer").hide().append(data).fadeIn("slow");
                      }
                    });

                    return false;
                });
            });

您可以看到用户点击链接类文本时，它会向具有更多ajax内容（即间隔）的页面发送ajax请求。因此，当用户单击另一个链接时，我需要清除旧的“数据”。我甚至完全删除了父元素并重新创建它，但它不会从数据中删除$ .ajax请求。任何帮助表示赞赏。

Answer 1

中止之前的请求...试试这个......

       $(function()
       {
            $("a.text").bind('click', Request);
       });

       function Request()
            {
                /* I put try catch so that if the xhr object doesn't exist it won't throw error */
                try{
                xhr.abort();
                }
                catch(e){}
                xhr = null;
                xhr = $.ajax({
                  url: $(this).attr("id") + ".html",
                  cache: false,
                  success: function(data){
                    $("#botscontainer").hide().html(data).fadeIn("slow");
                  }
                }
                return false;
            }

将链接绑定到一个函数......您基本上将它们分配给自己的AJAX。

Answer 2

您可以取消请求

var x;//in the outer scope of ajax call

x.abort();
x = $.ajax(params);

Answer 3

要执行此操作，您需要使用setInterval（）。只需将保存setInterval的var设置为全局，并在要加载ajax内容的第一页上，使用clearInterval（var）来停止先前的ajax请求。

$(function(){
                $("a.text").click(function()
                {
                    clearInterval(refreshId2);
                    $.ajax({
                      url: $(this).attr("id") + ".html",
                      cache: false,
                      success: function(data){
                        $("#botscontainer").hide().html(data).fadeIn("slow");
                      }
                    });

                    return false;
                });
            });

jQuery从$ .ajax加载的内容中删除所有$ .ajax请求

3 个答案: