簡體   English   中英

如何使用ajax僅加載wordpress帖子的內容

[英]How to load just the content of a wordpress post using ajax

我正在使用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。

謝謝你的幫助!

您可以使用模板,但是您需要編寫自己的模板,但會變得有些麻煩。 和您一樣,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請求中的機器可讀主題。 這有點復雜。

因此,我來​​這里尋求與OP [cmplieger]提出的解決方案類似的解決方案。

我以前使用過sudown描述的方法。 我做了這樣的WordPress主題。 該頁面使用標頭檢測,可以選擇加載標頭,然后加載內容(可以選擇頁腳)。
這是一個很棒的主題,加載速度非常快。 這確實是最好的方法...

然而...

我認為最好只在瀏覽器端起作用,所以這篇文章啟發了我寫這篇文章:

注意:這不是我要這樣做的方式。 我真的建議上面建議的方法。 但是,在某些情況下,您可能別無選擇,

SOOOO ....

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

片HTML
<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;}

傳播jQuery的自由層:

   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/

真正的訣竅是在load調用中。
第二個參數是“ #main_content”。 這告訴加載函數僅將該元素加載到您選擇的div中。 請參閱jQuery.load()手冊

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM