如何使用JavaScript從Ajax響應字符串中正確提取HTML元素？

我正在做一個項目，我不使用jQuery。如何使用JavaScript從Ajax響應字符串中正確提取HTML元素？

我想用Ajax從新頁面加載帖子，但我不知道應該如何從返回的字符串中正確提取特定HTML元素或內容。

下面是HTML（我試圖加載新內容的部分）的樣子;

<div id="posts"> 
<div class="post"> 1 </div> 
<div class="post"> 2 </div> 
<div class="post"> 3 </div> 
<div class="post"> 4 </div> 
<div class="post"> 5 </div> 
<!--posts--> 
</div> 

<div id="loadmore">Load More</div>

下面是我試過的腳本的樣子（它的工作原理）。

function load(path) { 
    var req = new XMLHttpRequest(); 
    req.onreadystatechange = function() { 
    if (req.readyState == 4 && req.status == 200) { 
     var resp = req.responseText; 
     var cont = resp.slice(resp.indexOf('id="posts">') + 11, resp.indexOf("<!--posts-->")); 
     document.getElementById("posts").innerHTML = document.getElementById("posts").innerHTML + cont; 
    } 
    } 
    req.open("GET", path, true); 
    req.send(); 
} 

var page = 1; 
document.getElementById("loadmore").onclick = function() { 
    page++; 
    var pathToLoad = "/page/" + page; 
    load(pathToLoad); 
}

我覺得我做的最糟糕的方式，我的問題是如何加載的內容是裏面的「#posts」在新頁面中更好的辦法？

謝謝！

來源

2015-10-01 Person

如果我明白你在找什麼，你可以創建一個新的元素並將responseText插入該元素。

function load(path) { 
    var req = new XMLHttpRequest(); 
    req.onreadystatechange = function() { 
     if (req.readyState == 4 && req.status == 200) { 
      var resp = req.responseText, 
       d = document.createElement('div'); 
      d.innerHTML = resp; // This way you have a dom node you can easily manipulate or iterate through 

      for(var i = 0; i < d.getElementsByClassName("post").length; i++){ 
       var el = d.getElementsByClassName("post")[i]; 
       console.log(el.innerHTML); 
       //Do stuff with the element you need to append. 
      } 

     } 
    } 
    req.open("GET", path, true); 
    req.send(); 
}

使用createElement函數，你有一個Element對象，你可以很容易地使用和操作你的目的。這是元素對象的引用。

https://developer.mozilla.org/en-US/docs/Web/API/Element

來源

2015-10-01 10:34:06 gmast

我只知道我可以使用「getElementByClassName」和「document」之類的東西，意思是類似的; 「document.getElementByClassName（ '類'）」。檢查我的項目和不同的瀏覽器... – Person

除非你使用的Internet Explorer版本少於8，否則你不應該有問題。讓我kwow :) – gmast

對於IE，我只支持IE9 +。我主要在Firefox工作。我還沒有能夠使事情工作，現在的'd.getElementsByClassName（「職位」）。長'返回零。它不應該，我試圖簡化頁面，並查看錯誤。是的，我會更新，謝謝！ – Person

快一個月了它已經，我正忙於其他工作，這就是爲什麼我遲到了。儘管這個項目是我最喜歡的。該項目的重要部分也集中在動畫上，在這方面進行工作（使用JavaScript）。

我在過去的一個月中學到了很多關於「實用JavaScript」的內容（我之前對jQuery懶惰），我做了一個小型庫以避免大量重複，大多數情況下我仍然會使用原生JavaScript，因爲它很酷。我的圖書館對我的項目讚不絕口，不再懶惰 - 哦，不。

也永遠不會再回到jQuery或使用任何我不明白百分百的東西。堅持我的規則。

這是我在@gmast的幫助下完成的。它工作，我現在滿意。

function load(path) { 
    var rUrl = path.substring(0, path.indexOf(" ")), 
    rSelector = path.substring(path.indexOf(" ") + 1), 
    req = new XMLHttpRequest(); 
    req.open("GET", rUrl, true); 
    req.onreadystatechange = function() { 
     if (req.readyState == 4 && req.status == 200) { 
      var nDoc = document.createElement('div'), nElem, length, i; 
      nDoc.innerHTML = req.responseText; 
      nElem = nDoc.querySelectorAll(rSelector); 
      length = nDoc.length; 
      for (i = 0; i < length; i += 1) { 
       document.getElementById("posts").appendChild(nElem[i]); 
      } 
     } 
    }; 
    req.send(); 
}

然後我這樣稱呼它;

var pageNumber = 1; 
document.getElementById("loadmore").addEventListener("click", function() { 
    pageNumber++; 
    var pathToLoad = "/page/" + page + " #posts > .post"; 
    load(pathToLoad); 
});

說明：

我改變getElementsByClassName到querySelectorAll的原因是因爲我要使用它的一些更多的東西，和實際的代碼我在項目中使用更爲複雜與回調和很多不同的對象。如果我不需要將這個函數用於多種不同的事情，我傾向於使用@gmast所建議的getElementsByClassName。

獲取for循環外部元素的長度非常重要，否則會產生錯誤，因爲這裏我將每個循環移除一個元素。可選擇不使用增量（即不使用i++,i += 1等）來解決問題。

如果你看到我在@ gmast的答覆意見，你會看到我在談論讓「[對象HTMLDivElement]」，那是因爲innerHTML接受HTML不是對象，也是我的觀點是對的數字。

我對與DOM連接的JavaScript的大部分內容都表示不滿。現在我更好了。

來源

2015-10-28 22:07:35 Person

如何使用JavaScript從Ajax響應字符串中正確提取HTML元素？

回答

相關問題