Question

如果您查看我的网站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);
    });
});

如果您需要任何其他代码，请告诉我，我会尽力添加

添加了这个...截断它以显示第一个锚点。

<!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>

Answer 1

使用all-ajax网站，您需要使用History api更新网址。

我建议HistoryJS来管理这个跨浏览器。

基本上，当您更改页面内容时，您将调用pushState（或replaceState）来存储您的站点/应用程序的“状态”。此状态可以是您喜欢的任何JS对象。您推送或替换状态，提供URL。这可以改变浏览器URL（和历史记录），而不会强制重新加载页面。

然后你将处理onPopState事件以在用户导航时处理'state'（例如后退按钮）。

根据您的描述，您将获得的主要直接优势是能够更新URL（启用链接等），而不必强制整个页面重新加载。

编辑： Here's使用History.js的小型演示注意：您需要在CodePen的调试视图中看到这一点，以便实际看到它正常工作。 CodePen似乎提供了一个框架，可以防止您看到URL /标题更改。我建议使用Forking这个例子在Debug视图中使用它。

Answer 2

一种方法是使用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 plugin并使用$.address.externalChange功能，因为它适用于不支持{的旧版IE {1}}事件。

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

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

如何在Ajax请求的URL中包含GET变量？

2 个答案: