虽然找不到元素加载ajax答案

【问题标题】：while element not found load ajax虽然找不到元素加载ajax
【发布时间】：2013-07-18 16:01:22
【问题描述】：

我有一个包含长分页内容的页面。现在为了访问一个项目，我想加载页面，直到找到所需的项目。问题是我的“while”循环总是进入无限循环。经过一些研究，我发现由于 ajax 的异步行为，它永远找不到元素。这是我正在使用的代码

While 循环加载内容直到找不到元素：

$(document).ready(function(){
    if(document.getElementById('selectedItem')) {
        totalPages = $("#selectedItem").attr("totalPages");
        trgtElementUrl = $("#selectedItem").val();

        var targetElement = $("#" + trgtElementUrl);
        i = 2;

        //getting $('#'+trgtElementUrl).length always 0

        while(!($('#'+trgtElementUrl).length)) {
            $('#page' + i).trigger("click");
            i++;
        }

        target_top = $('#'+trgtElementUrl).offset().top;
        target_top = target_top - 10;

        $('html, body').animate({scrollTop:target_top}, 500);

        $(".summaries li").removeClass();

        $('#'+trgtElementUrl).addClass('active');
    }

});

通过触发点击事件和ajax调用

$('a.loadMore').live("click",function(event){
    $(this).hide();
    $(".loaderImage").show();
    event.preventDefault();
    var link = $(this).attr("href");
    $.ajax({
        url: link,
        dataType: "html",
        success: function(data) {

            if($('a.loadMore').parent().parent().hasClass('advertisingGrid')){
                var items = $(data).find('ul.advertisingGridItems').html();
                $(items).hide().appendTo('ul.advertisingGridItems').show('normal');
            } else {
                var items = $(data).filter('ul.summaries').html();
                var subnav = $(data).filter('nav.subnav');
                var itemLinks = $(subnav).find('ul').html();
                $('div#pagination').remove();
                $(items).appendTo('ul.summaries');
                $(itemLinks).appendTo('.subnav ul');
            }

            $(".loaderImage").hide();
        }
    });
    return false;
});

这总是适用于同步 ajax 调用。是否可以在没有同步 ajax 调用的情况下使其工作。谢谢

【问题讨论】：

这个调用有什么同步的？
这总是适用于同步 ajax 调用。是否可以在没有同步 ajax 调用的情况下使其工作？ -> ajax 代表 asynchronous JavaScript 和 XML
不，因为您将同时发送数千个 ajax 请求。
这是一个不好的搜索项目的方法。您应该在一个 ajax 请求中发送 trgtElementUrl 值并从服务器返回正确的页面（包含目标项）。
@openbees：是的，它可以工作，因为它确实会阻塞。但即便如此，这种做法也很奇怪而且很糟糕。您可能只是为了到达目标页面而生成许多 ajax 请求。为什么不发送一个 ajax 请求，其中包含您想要的项目名称，让服务器将确切的页面返回给您？

标签： jquery ajax

【解决方案1】：

不要请求单个页面，而是更改您的 AJAX 请求以包含您正在搜索的项目的名称/ID 和当前页码。

让服务器端代码使用当前页面和目标页面（包含目标项目的页面）之间的页面/项目列表对此做出响应。

收到响应后，根据客户端请求为收到的页面设置动画（与您现在执行的方式相同）。

这里的不同之处在于您发出一个异步请求，并且您收到了所有您需要的数据。从那里开始，您可以使用 CSS 和 JS 以任何您想要的方式制作动画。

这种方法的另一个好处是您可以正确处理连接错误、请求异常和其他在找不到目标项时可能导致的异常。

【讨论】：

非常感谢@Ma3x :)