[英]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.