如何使用ajax加载一个wordpress文章的内容

我正在使用ajax在wordpress中加载一篇新文章。这是基本的代码：如何使用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。

感谢您的帮助！

来源

2012-09-09 cmplieger

如果你愿意使用JQuery，它会容易得多，它为你做了大部分工作。请注意'.load（）'如何与选择器一起使用：http://api.jquery.com/load/ –

使用jquery它会有什么不同？它仍然只是加载整个页面，而不仅仅是内容。 – cmplieger

你可以使用一个模板，但你需要编写自己的，它会变得有点繁琐。 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请求中调用你的机器可读主题。这有点复杂。

来源

2012-09-09 22:59:43

我更喜欢纯净。只需要3或4条线就可以获得正确的数据。理论上模板的方式是什么？ – cmplieger

@SnippetSpace我的回复对评论来说太长了，所以我将它们编辑为答案。 –

感谢您的解释:) – cmplieger

所以，我来到这里寻找一个类似的解决方案由OP [cmplieger]提出的一个。

我曾经使用通过sudowned中描述的方法。我做了这样一个WordPress主题。该页面使用标题检测，可选择加载标题，然后加载内容，可选页脚。
这是一个伟大的主题，加载速度超快。这真的是最好的方法......

但是......

我觉得这一定是有很大的东西，只有在虽然浏览器端的工作，所以这个帖子的启发我写它：

记：这不是我会这样做的方式。我真的会建议上面建议的方式。然而，有可能是因为你可能没有别的办法某些情况下，

SOOOO ....

HTML的

/* requires jQuery */ 
// some assumptions: 
// you are using jQuery 
// the pages you are calling are inside 
// the same domain as the page calling them. 
//

切片
<div id="content"> <div id="list"> <ul> <li name="//fiddle.jshell.net/isme/j4ygp3nn/show/">Page 1</li> <li name="//fiddle.jshell.net/isme/gmvj0ohg/show/">Page 2</li> </ul> </div> </div>

CSS飞溅：
#list ul { list-style-type: none;} #popc { margin-top: 20px; margin-left: 20px;} #list ul li { text-decoration: underline; color: #343434; margin-bottom: 5px; cursor: pointer;} #popcontent { background: #ffffff; border: 1px solid #000000; width: 80%; min-width: 80%; margin-left: auto; margin-right: auto; height: 80%; min-height: 300px; position: absolute; display: none; top: 10%; left: 10%; border-radius: 12px;} #x_it { text-align: center; float: right; width: 17px; border: solid 2px #000000; color: #000000; background: red; border-radius: 12px; padding-left: 0px; padding-right: 1px; padding-top: 2px; padding-bottom: 0px; margin-right: 10px; font-family: sans-serif; font-weight: bold; cursor: pointer;}

传播自由层jQ uery：

jQuery("#content").after("\ 
     <div id=\"popcontent\">\ 
      <p id='x_it'>X</p>\ 
<div id='popc'></div></div>"); 

    popc = jQuery("#popc"); 
    popcontent = jQuery("#popcontent"); 
    jQuery("#x_it").click(function() { 
    popcontent.fadeOut("fast"); 
    }); 

jQuery("#list ul li").click(function() 
           { 
        popc.html(""); 
        popc.load(jQuery(this).attr("name") + \ 
        " #main_content"); 
        popcontent.fadeIn("fast"); 
           });

我贴在摆弄一个工作演示： https://jsfiddle.net/isme/jjok5kus/34/

这里真正的窍门是在负载通话。
第二个参数是“#main_content”。这告诉加载函数只将该元素加载到您选择的div中。查看jQuery.load()的手册

来源

2016-12-29 22:22:28 isme

如何使用ajax加载一个wordpress文章的内容

回答

相关问题