javascript - 如何使用ajax仅加载wordpress帖子的内容

Question

我正在使用 ajax 在 WordPress 中加载新帖子。这是基本代码:

function test(){
    var menuitem = document.getElementsByTagName('nav')[0].childNodes;
    for(var i= 0; i < menuitem.length; i++)
    {
        bindEvt(menuitem[i], "click", loadajax);
    }
};
function loadajax (event) {
    event.preventDefault();
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange  = function(){
        var content = document.getElementsByTagName('article')[0];
        if(xhr.readyState  == 4){
            if(xhr.status  == 200) {
                content.innerHTML = xhr.responseText;
            } else{
                content.innerHTML = 'Cannot connect to server. Check your internet connection'}
        }
    }; 

    xhr.open('GET', this.href, true);
    xhr.send();

}
bindEvt(window, "load", test);

它工作正常，只是它加载了整个新帖子的菜单、页眉、页脚等......我只需要内容和评论。有没有办法使用ajax专门向wordpress询问这些内容，或者是获取整个页面然后仅提取我需要的内容并重新发布的唯一方法它？

也许可以为其制作一个特定的模板页面？但我该如何让它发挥作用。

我希望我已经说清楚了。如果没有请告诉我!第一次尝试 WordPress 主题/PHP。

感谢您的帮助!

Answer 1

您可以使用模板，但您需要编写自己的模板，并且会变得有点繁琐。 Andrew M. 关于 jQuery 解决方案的评论是正确的，您也是如此:您仍然会下载整个文档，但您只能很容易地插入您想要的部分。有关更多详细信息，请参阅加载页面片段部分，但为了方便起见:

$('#result').load('ajax/test.html #container');

将加载 test.html 并将该文档的 #container 元素的内容插入到父页面上的 #result 元素中。简单易行。

当然，这将导致与完全渲染源页面一样多的服务器负载和消耗同样多的带宽，但幸运的是，图像等只有在它们是渲染部分的一部分时才会被加载。不过，除非您有大量流量，否则不必担心这种开销。

假设您希望服务器首先发送您需要的数据:您将如何处理这取决于您对 WordPress 实例的其他需求。

如果您只需要加载一个页面，并且没有人直接查看原始页面，那么很简单 - 编写一个仅包含以下内容的模板:

while ( have_posts() ) : the_post();
  echo '<h2>';
  the_title();
  echo '</h2>';
  the_content();
endwhile;

并为相关帖子设置该模板。

但是，如果您还需要人们查看源页面上的帖子，则必须使用如上所述的单曲模板创建一个主题，并安装主题切换器插件，并传递必要的信息mojo 在 AJAX 请求中调用机器可读主题。这有点复杂。