ajax 页面加载器出现 404 错误答案

【问题标题】：404 error with ajax page loaderajax 页面加载器出现 404 错误
【发布时间】：2017-07-28 16:29:25
【问题描述】：

我在页面上有一个 ajax 帖子加载器。调用它的链接如下所示：

<div class="load_more_cont">
  <p align="center">
    <a href="http://www.example.com/category/books/page/5/" title="Load more"><span class="fa fa-angle-down fa-fw button" aria-hidden="true"></span></a>
  </p>
</div>

这是 ajax：

$('.load_more_cont a').on('click', function(e)
{
e.preventDefault();

//how many posts per page
var posts_per_page = 12;

//set button to contain spinning loading icon
$(this).html('<span class="fa fa-refresh fa-spin fa-fw loading" aria-hidden="true">');
console.log($(this).attr('href') + '#main_container');

$.ajax({
    type: "GET",
    url: $(this).attr('href') + '#main_container',
    dataType: "html",
    success: function(out)
    {
        //result of query
        result = $(out).find('#load_posts_container .home_post_box');

        //append result to posts container
        $('#load_posts_container').append(result).masonry( 'appended', result, true );

        //find the next link in the returned result
        nextlink = $(out).find('.load_more_cont a').attr('href');

        //if (nextlink != undefined)
        if (result['length'] == posts_per_page)
        {
            //add the next link to the load more button
            $('.load_more_cont a').attr('href', nextlink);
            $('.load_more_cont a').html('<span class="fa fa-angle-down fa-fw button" aria-hidden="true">');
        }
        else
        {
            //remove the load more button and add a clearing div
            $('.load_more_cont').remove();
            $('#load_posts_container').append('<div class="clear"></div>');
        }
    },
   error: function(xhr, ajaxOptions, thrownError){
       console.log(xhr.status);
       console.log(thrownError);
   }
});
});

它工作正常，但是当我进入该类别的第 5 页（如书籍第 5 页以上）时，我收到 404 错误。如果我在浏览器中加载类别 url 没有问题 - 第 5 页和第 6 页都存在并加载。一切都在同一台服务器上。如果我没有选择一个类别，所以 url 看起来像这样 http://www.example.com/page/5/ 那么它也可以正常工作。知道可能是什么问题吗？

【问题讨论】：

您是否检查过$(this).attr('href') 以确保它返回正确的路径？您可以console.log($(this).attr('href')); 在控制台中打印，也可以使用开发工具中的网络部分来监控 ajax 调用。
这是我发布的代码。
它是否显示正确的路径？您是否在开发工具中检查过网络？它一定是某个地方的错字，因为 404 意味着它不存在。尝试从通话中删除 #main_container。
是的，每次都是。这是控制台在删除 #main_container javascript.js:226 http://www.example.com/category/books/page/4/ javascript.js:226 http://www.example.com/category/books/page/5/ jquery-3.1.0.js:9392 GET http://www.example.com/category/books/page/5/ 404 (Not Found)send @ jquery-3.1.0.js:9392jQuery.extend.ajax @ jquery-3.1.0.js:8999(anonymous function) @ javascript.js:228jQuery.event.dispatch @ jquery-3.1.0.js:5110elemData.handle @ jquery-3.1.0.js:4918 javascript.js:262 404 javascript.js:263 Not Found 后吐出的内容@
我现在正在浏览网站。我明白你的意思，这很奇怪。我会继续环顾四周，如果我发现任何可能导致此问题的原因，我会回复您。

标签： javascript ajax get

【解决方案1】：

您的 if 条件在 imo 中毫无意义：if (result['length'] == posts_per_page)。如果您有超过 posts_per_page 项目，则存在分页链接，如果它更多或相等则不存在。如果页面上有5个项目，posts_per_page = 5，不代表有下一页。

如果你在最后一页，通常应该没有分页链接，所以检查应该是这样的

if ($(out).find('.load_more_cont a').length > 0) { ...

我的猜测是您在最后一页上有posts_per_page 的项目数量，并且您将下一个链接设置为undefined 导致错误。

【讨论】：

条件if (result['length'] == posts_per_page) 是正确的。结果每页只返回 12 个，因此检查它是否不完全相等，如果是，则消除链接是正确的。但是您是正确的，页面上的 12 并不意味着有下一页。我忽略了这一点，所以已经换掉了这个if (nextlink != "") 的条件（类似于你发布的内容），这意味着我也可能会丢失posts_per_page。无论如何，这都不是问题。第 5 页的请求始终失败 - 第 5 页有 12 个项目（一整页），第 6 页有 4 个。

【解决方案2】：

解决方案是结合 wordpress 中的每页帖子设置（我设置为 16）、帖子的显示方式（我每页显示 12 个）以及如何处理 404（按 index.html）。 php 而不是 404.php 页面）。因此，从某种意义上说，从 GET 获取带有完整页面的 404 是完全正确的，即使这看起来很矛盾。一旦我给 wordpress 一个 404.php 页面，我就能够分离问题，然后追踪到由于每页设置的页数不正确。

【讨论】：