如何用JavaScript正确地从Ajax响应字符串中提取HTML元素

How to properly extract HTML element from Ajax response string with JavaScript?

本文关键字：字符串 提取 HTML 元素 响应 Ajax 何用 JavaScript 正确地      更新时间：2023-09-26

我正在做一个不使用jQuery的项目。

我试图用Ajax加载新页面的帖子，但我不知道我应该如何从返回的字符串中提取特定的HTML元素或特定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"里面的内容?

谢谢!

如果我明白你在寻找什么，你可以创建一个新的元素，并插入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

已经快一个月了，我一直忙于其他工作，所以迟到了。这个项目是我最喜欢的。这个项目的很大一部分也集中在动画上，(在JavaScript中)。

在过去的一个月里，我学了很多关于"实用JavaScript"的知识(我以前对jQuery很懒)，我做了一个小库来避免大量的重复，大多数情况下我仍然会使用原生JavaScript，因为它很酷。我的库是对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();
}

我叫它like;

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的回答下的评论，你会发现我在谈论获得"[object HTMLDivElement]"，这是因为innerHTML接受HTML而不是对象，而且我的观点是关于数字的。

我对JavaScript与DOM连接的大部分内容都很陌生。现在我好多了。

相关文章：