Question

前段时间我有一个网站，当点击一个网址时会加载它的某些部分。例如：

www.mysite.com/index.php将变成www.mysite.com/index?contact.php

，锚点看起来像<a href="index?contact.php">Contact</a>

标题，导航栏和页脚不会再次加载，但“索引”的内容将被“联系人”的内容替换

我只是记不起会使锚点替换从锚点中加载所请求的PHP文件的脚本。

索引文件看起来像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My Site</title>
<style>
<?php include 'css/styles.css'; ?>
</style>
</head>

<body>
<script here>
<a href="index?contact.php">Contact</a>
<a href="index?contact.php">Store</a>
<a href="index?contact.php">Stuff</a>
</body>
</html>

然后每个“php”文件将加载一组不同的：

<div id="div_1"></div>
<div id="div_2"></div>
<div id="div_3"></div>

这一切都来自一个CSS。

我希望我对自己要完成的工作足够清楚，有人可以帮助我。

Answer 1

您可以使用AJAX / XMLHttpRequest实现此目的。如果您不使用像jQuery这样的js库，纯粹的js将是这样的：

function requestPage(requestPage) {
    var xmlhttp = new XMLHttpRequest();
    // what will we do with the response?
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("content").innerHTML = xmlhttp.responseText;
        } else {
            // page could not be loaded/requested
            document.getElementById("content").innerHTML = "Page not found.";
        }
    }
    // actuall request
    xmlhttp.open("GET", requestPage, true);
    xmlhttp.send();
}
var anchors = document.querySelectorAll("a");
for(var index = 0; index < anchors.length; index++) {
    anchors[index].addEventListener("click", function (event) {
        event.prefentDefault();
        requestPage(event.target.href);
    });
}

此代码假设您已获得一个ID为＃＆＃34; #content＆＃34;的元素。应加载页面内容的位置。关于可能性以及如何使用js XMLHttpRequest对象的一点参考：http://www.w3schools.com/ajax/default.asp

加载页面内容而不重新加载横幅

1 个答案: