如何使用带有纯 JavaScript 的 AJAX 从 URL 的特定 HTML 元素加载内容？

Question

我只是想替换<main> -Element 和firstPage.html的内容...

// ... header of my 1st document ...

<body>
    <main>
        The content of the 1st document...
    </main>
</body>

// ... footer of my 1st document ...

...使用<main> -Element 及其内容secondPage.html ...

第二页.html

// ... header of my 2nd document ...

<body>
    <main>
        The content of the 2nd document...
    </main>
</body>

// ... footer of my 2nd document ...

...通过纯 JavaScript 使用 AJAX 调用。 我怎么能那样做？

我可以使用多种方法将第二个文档完全加载到第一个文档中，但是我在 JavaScript 中找不到任何解决方案来将另一个 URL 中的特定 HTML 元素加载到第一个文档的 DOM 中。 :(

更新/编辑：

这是我的 ajax 函数的现状：

 var myLoad = ( type, url, data, success ) => { var d = data ? ( typeof data == 'string' ) ? data : Object.keys(data).map(k=>( encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) )).join('&') : '' ; var u = (d && type==='GET') ? url+'?'+d : url ; var x = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); x.open(type,u); x.onreadystatechange = () => { if( x.readyState > 3 && x.status == 200 ){ success(x.responseText) } }; x.setRequestHeader('X-Requested-With','XMLHttpRequest'); if( type === 'POST' ){ x.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); x.send(d); } else { x.send(); } return x; }; myLoad( 'GET', 'secondPage.html', '', r => { // of course this loads the whole document (secondPage.html) into <main> // but how to do otherwise ??? document.querySelector('main').innerHTML = r; };

Answer 1

您可以使用fetch API来获取 HTML 作为文本。

然后使用DOMParser将其解析为 HTML 以获取新的 HTML 并将其添加到旧的<main> 。

在这种情况下，我在 DOM 加载后立即添加了 HTML ( DOMContentLoaded )，但您最终可以将其更改为适合您需要的任何内容：

document.addEventListener('DOMContentLoaded', DOMContentLoadedJS, false);

function DOMContentLoadedJS(event) {
    //fetch html as text
    fetch("/page2.html").then(response => response.text()).then(AfterFetchingHTML);
}

function AfterFetchingHTML(htmlText) {
    let main1 = document.querySelector("main"); //<main> on page1.html

    let htmlParser = new DOMParser();
    let htmlDoc = htmlParser.parseFromString(htmlText, "text/html");
    let main2 = htmlDoc.querySelector("main"); //main on page2.html

    //clear children from first <main>
    while (main1.firstChild) main1.removeChild(main1.firstChild);

    //add new <main>
    main1.innerHTML = main2.innerHTML;
}

如何使用带有纯 JavaScript 的 AJAX 从 URL 的特定 HTML 元素加载内容？

问题描述

1 个解决方案

解决方案1
0 2019-12-09 15:56:12

如何使用带有纯 JavaScript 的 AJAX 从 URL 的特定 HTML 元素加载内容？

问题描述

1 个解决方案

解决方案1 0 2019-12-09 15:56:12

解决方案1
0 2019-12-09 15:56:12