Question

我正在尝试使用香草JS来加载内容而无需刷新。单击菜单选项时，我想从另一个html文件中获取内容，但只能获取正文或特定类。

在没有jQuery的情况下可以做到吗？

谢谢！

var AJAX = function(page){

  var call = new XMLHttpRequest();

  call.open("GET", page);

  call.send();

  call.addEventListener("load", function(e){
    console.log(e.target.responseText); // this shows all the HTML as text, but I only want to grab either the body or a particular class, and use it in an innerHTML method.
  });
}

Answer 1

使用XMLHttpRequest很简单-将responseType设置为document时，实例化的XMLHttpRequest的{{1}}属性将包含响应文档，您可以在其上使用普通的DOM方法。例如，以下代码将从响应文档中选择并记录类名称为.response的第一个元素的文本：

foo

如果使用更现代的function get(url){ var r = new XMLHttpRequest(); r.open('GET', url, true); r.responseType = 'document'; r.onload = function () { if (r.readyState !== 4 || r.status !== 200) return; // also handle error statuses // now, r.response is a document: const doc = r.response; console.log(doc.querySelector('.foo').textContent); }; r.send(); }方法，则可能必须使用fetch将响应文本显式转换为文档。例如：

DOMParser

function get(url){ fetch(url) .then(res => res.text()) .then((text) => { const doc = new DOMParser().parseFromString(text, 'text/html') console.log(doc.querySelector('.foo').textContent); }); }的优点之一是，您可以使用它将任何（有效）HTML字符串转换为文档。

Answer 2

您可以：

将内容分配给隐藏的div。然后查询DOM。
将响应解析为XML并访问标签。

对于1：

ajaxRequest.onreadystatechange = function() {

           if(ajaxRequest.readyState == 4) {
              var ajaxDisplay = document.getElementById('ajaxDiv');
              ajaxDisplay.innerHTML = ajaxRequest.responseText;
           }
        }

对于2，这可能会有所帮助： https://stackoverflow.com/a/13460821/1364747

AJAX-从另一个HTML文件中获取特定的DOM元素？

2 个答案: