javascript - 如何使用 Ajax 请求在 URL 中包含 GET 变量?

标签 javascript php jquery ajax

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

相关文章:

jquery - Chartjs 将图标添加到工具提示和标签

javascript - Thymeleaf 页面刷新跟进 - 现在使用 AJAX

php - 使用 XAMPP 在 Windows 10 中安装 go-pear.phar 时出错

php - 从部分英国邮政编码返回的结果不正确

php - 使用 AJAX/jQuery 刷新图像

jquery - Liferay ajax 请求和 JSON 响应

javascript - 根据浏览器调整 div 宽度

javascript - 如何从 Node.js 上的错误对象中读取错误消息作为字符串

javascript - Twitter 支持 OAuth2 授权代码流程吗?

php - 为wordpress中的不同帖子动态更改CSS中的背景图片