使用AJAX加載網頁的一部分 - 沒有JQuery

我知道有一個JQuery的方式來做到這一點，但這不是我現在需要的。使用AJAX加載網頁的一部分 - 沒有JQuery

我有以下的javascript，拉一個網頁內容到一個div，但是我不想整個頁面，只需從該頁面DIV的內容：

function ahah(url, target) { 
document.getElementById(target).innerHTML ='<img src="ajax-loader.gif"/>'; 
if (window.XMLHttpRequest) { 
req = new XMLHttpRequest(); 
} else if (window.ActiveXObject) { 
req = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
if (req != undefined) { 
req.onreadystatechange = function() {ahahDone(url, target);}; 
req.open("GET", url, true); 
req.send(""); 
} 
} 

function ahahDone(url, target) { 
    if (req.readyState == 4) { // only if req is "loaded" 
    if (req.status == 200) { // only if "OK" 
     document.getElementById(target).innerHTML = req.responseText; 
    } else { 
     document.getElementById(target).innerHTML=" Error:\n"+ req.status + "\n" +req.statusText; 
    } 
    } 
} 

function load(name, div) { 
ahah(name,div); 
return false; 
}

然後，我把它叫做像這樣：

<a href="page.php" onclick="load('page.php','ajaxcontent');return false;" class="slide_more">LOAD</a>

哪裏應該指定我想從page.php加載的選擇器？

來源

2011-09-07 elbatron

如果您只需要整個頁面的一部分，那麼該DIV不應該只是你從服務器返回的而不是發回整個頁面？ – momo

的確，這就是我來這裏的原因，我不知道該怎麼做。我不知道要在上面的代碼中更改哪些內容才能獲取div而不是整個頁面。 – elbatron

page.php是需要返回DIV的人。您的客戶端JavaScript代碼不是會切斷頁面並獲取DIV的人。這通常不會這樣 – momo

通常在AJAX應用程序中，爲了獲得HTML片段，服務器是返回片段而不是在客戶端選擇它的人。例如，請參閱第4節的Simple Example。酷酷的AJAX示例。從網站的代碼提供如下，供大家參考：

<?php 
function validate($name) { 
    if($name == '') { 
    return ''; 
    } 

    if(strlen($name) < 3) { 
    return "<span id=\"warn\">Username too short</span>\n"; 
    } 

    switch($name) { 
    case 'bob': 
    case 'jim': 
    case 'joe': 
    case 'carol': 
     return "<span id=\"warn\">Username already taken</span>\n"; 
    } 

    return "<span id=\"notice\">Username ok!</span>\n"; 
} 

echo validate(trim($_REQUEST['name'])); 
?>

注意，PHP頁面只返回一個HTML片段包含<span>僅而非完整的HTML。這是AJAX調用的好處之一，您無需返回整個頁面，從而節省帶寬成本，因爲有效負載較小。

來源

2011-09-07 15:09:30 momo

中添加了參考+解釋。我現在明白了。我真的認爲有一些像JQuery加載純JavaScript的地方，你想要拉的部分是在客戶端定義的。感謝這個例子，我擔心它不會爲我工作：我想從我的Wordpress網站獲取信息，並且我想我不能只在循環中添加一些php。 – elbatron

我可以想到jQuery可能會做的事情，儘管我自己沒有親自嘗試過。如果你想我可以嘗試一個與jQuery的快速例子，看看是否可行 – momo

謝謝莫莫。實際上，我使用jQuery加載，但切換到Javascript，因爲實際上觸發HTML片段調用的鏈接是在一個解析的XML文件中，並且在頭部定義的jQuery調用的鏈接不會工作 - 只有舊的a href onlick =「」似乎沒問題... – elbatron

使用AJAX加載網頁的一部分 - 沒有JQuery

回答

相關問題