单击链接以导航另一个页面，无需页眉、页脚更改

【问题标题】：Click on link to navigate another page without header, footer change单击链接以导航另一个页面，无需页眉、页脚更改
【发布时间】：2016-09-19 18:59:34
【问题描述】：

我的网站有固定的页眉和页脚组件。我在正文页上有一个链接。当我单击链接时，它应该导航到另一个页面而不更改页眉和页脚组件。任何人都知道如何使用 jquery/javascript 来实现它。

【问题讨论】：

AJAX 是你所需要的。
...为什么需要 jQuery？为什么你不能只使用标准链接并在所有页面上都有标题？或者，地狱，一个 iFrame？
@semsem ;- 你能分享任何示例代码吗？
@some person :- 我不想在这里使用 iFrame。而且我不想在所有页面中包含标题。
w3schools.com/jquery/jquery_ajax_intro.asp

标签： javascript jquery html onclick

【解决方案1】：

你可以直接使用 XMLHttpRequest 到你想要的 html 页面，像这样：

function load_htm()
{
var xml = new XMLHttpRequest();
//here your content to be loaded
var elem = document.getElementById('content');
//here goes your target html file...
url = "/yourfile.htm";
//this is not the better way to, but will clear the element...
elem.innerHTML = '';
if (xml !== null) {
xml.open('GET', url, true);

    xml.send();
    xml.onreadystatechange = function() {
    if (xml.readyState === 4) {
        //getting the results and assign to element
        response = xml.responseText;
        elem.innerHTML = response;
        }
    }
}
}

html:

<div id="footer"></div>
<div id="link" onclick="load_htm();"></div>
<div id="content"></div>
<div id="header"></div>

【讨论】：