如何通过Ajax请求在URL中包含GET变量



如果你在这里查看我的网站,你可以看到我使用ajax来加载所有页面,问题是没有一个get变量最终出现在URL中。由于各种原因,这很糟糕,最大的原因是我显然无法提供特定页面的链接。我不太确定该改什么。把我推向正确的方向,如果需要的话,我会去自学,我只需要推动。谢谢

所有链接都是ajaxAnchors

$('.ajaxAnchor').on('click', function (event){ 
event.preventDefault(); 
var url = $(this).attr('href');
$.get(url, function(data) {
$('section.center').html(data);
});
});

如果你需要任何其他代码,请告诉我,我会尽我所能添加

已添加此。。。将其截断一点以刚好显示到第一个锚点。

<!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站点,您需要使用Historyapi来更新URL。

我推荐HistoryJS来管理这个,跨浏览器。

基本上,当你更改页面内容时,你会调用pushState(或replaceState)来存储你的网站/应用程序的"状态"。这个状态可以是你喜欢的任何JS对象。您推送或替换状态,并提供一个URL。这可以在不强制重新加载页面的情况下更改浏览器URL(以及历史记录)。

然后,您将处理onPopState事件,以在用户导航时处理"状态"(例如后退按钮)。

根据您的描述,您将获得的主要直接优势是能够更新URL(启用链接等),而无需重新加载整个页面。

编辑:这里有一个使用History.js的小演示注意:您需要在CodePen的调试视图中看到这一点,才能真正看到它正常工作。CodePen似乎提供了一个框架,防止您看到URL/Title的更改。我建议Forking这个例子在Debug视图中使用它。

一种方法是使用URL哈希:

<a href="#repair" class="ajaxAnchor">Repair</a>

当点击链接并且哈希发生变化时,检查哈希以确定要加载的页面:

$('.ajaxAnchor').on('click', function (event){ 
event.preventDefault(); 
var hash = window.location.hash;
if (hash && hash.length > 0) {
var url = hash + '.html';    
$.get(url, function(data) {
$('section.center').html(data);
});    
}
});  

您可以监听hashchange事件,但我建议使用jQuery Address插件并使用$.address.externalChange函数,因为它适用于不支持hashchange事件的旧版本IE。

要直接链接到页面,只需在页面加载后检查哈希,然后相应地加载正确的数据。

这种方法还具有使用后退和前进按钮进行导航的优点。

最新更新