Question

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

我正在尝试使用Ajax从新页面加载帖子，但我不知道应该如何从返回的字符串中正确提取特定HTML元素或内容。

以下是HTML（我试图加载新内容的部分）的样子;

FindIterable<Document> iterable7 = db.getCollection("1dag").find(
                new Document()
                        .append("timestamp", new Document()
                                .append("$gte", startTime)
                                .append("$lte", endTime))
                        .append("id", new Document()
                                .append("$eq", 10)));

以下是我尝试过的脚本的样子（它的工作原理）;

<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>

我觉得我这样做的方式最差，我的问题是如何以更好的方式从新页面加载“#posts”内的内容？

谢谢！

Answer 1

如果我理解了您正在寻找的内容，您可以创建一个新元素并将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

Answer 2

已经差不多一个月了，我忙于其他作品，这就是我迟到的原因。这个项目是我最喜欢的。该项目的重要部分也集中在动画上，并以此为基础（在JavaScript中）。

我学到了很多关于＆＃34;实用的JavaScript＆＃34;在过去的一个月里（我之前对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();
}

然后我称之为;

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的回答中看到我的评论，您会看到我正在谈论获取＆＃34; [对象HTMLDivElement]＆＃34;，这是因为innerHTML接受{{1}不是对象，我的观点也与数字有关。

关于与DOM连接的JavaScript的大部分内容，我都是noob。现在我好多了。

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

2 个答案: