如何使用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元素？

回答

相关问题