如果您查看我的网站here你可以看到我使用 ajax 来完成所有页面加载,问题是没有一个 get 变量最终出现在 URL 中。由于多种原因,这很糟糕,其中最大的原因是我显然无法提供特定页面的链接。我不太确定要改变什么。把我推向正确的方向,如果需要的话,我会去自学,我只需要插入。谢谢!
所有链接都是ajaxAnchors
$('.ajaxAnchor').on('click', function (event){
event.preventDefault();
var url = $(this).attr('href');
$.get(url, function(data) {
$('section.center').html(data);
});
});
如果您需要任何其他代码,请告诉我,我会尽力添加它
添加了此...将其 chop 了一点以仅显示第一个 anchor 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chico TechXperts</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="scripts/scripts.js"></script>
<link rel="stylesheet" type="text/css" href="styles/stylesheet.css" />
</head>
<body>
<section id="wrap">
<header class="header" >
<hgroup>
<embed id="logo" src="images/techxpertslogo.svg" width="100px" height="100px" type="image/svg+xml" />
<h1 class="header">TechXperts Chico</h1>
<h2 class="header">Technology Training and Repair 592-0886</h2>
</hgroup>
</header>
<nav class="top">
<a class="ajaxAnchor" href="home.html">
<div id="navOne" class="top">
<span class="top">Home</span>
</div>
</a>
</nav>
</section>
</body>
</html>
最佳答案
对于全 ajax 站点,您需要使用 History api 来更新 URL。
我推荐HistoryJS来管理这个,跨浏览器。
基本上,当您更改页面内容时,您将调用pushState(或replaceState)来存储站点/应用程序的“状态”。这个状态可以是任何你喜欢的 JS 对象。 您可以推送或替换状态,并提供 URL。这可以更改浏览器 URL(以及历史记录),而无需强制重新加载页面。
然后,您将处理 onPopState 事件来处理用户导航时的“状态”(例如后退按钮)。
根据您的描述,您将获得的主要直接优势是能够更新 URL(启用链接等),而无需强制重新加载整个页面。
编辑: Here's使用 History.js 的一个小演示 注意:您需要在 CodePen 的调试 View 中看到这一点,才能真正看到它正常工作。 CodePen 似乎提供了一个框架,可以防止您看到 URL/标题的更改。 我建议 fork 此示例以在“调试” View 中使用它。
关于javascript - 如何使用 Ajax 请求在 URL 中包含 GET 变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20861894/