Javascript 如何使用Ajax请求在URL中包含GET变量？_Javascript_Php_Jquery_Ajax

Javascript 如何使用Ajax请求在URL中包含GET变量？

javascript php jquery ajax

Javascript 如何使用Ajax请求在URL中包含GET变量？,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,如果您查看我的站点，您会发现我使用ajax来完成所有页面加载，问题是没有一个get变量最终出现在URL中。由于各种原因，这是不好的，最大的原因是我显然不能提供特定页面的链接。我不太确定该换什么。把我推向正确的方向，我会去自学，如果需要的话，我只需要推动。谢谢所有链接都是ajaxAnchors $('.ajaxAnchor').on('click', function (event){ event.preventDefault(); var url = $(this).att

如果您查看我的站点，您会发现我使用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>


奇科技术专家
奇科技术专家
技术培训和维修592-0886

对于全ajax站点，您需要使用历史api来更新URL

我建议您跨浏览器管理此功能

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

然后，您将处理onPopState事件，以在用户导航时处理“状态”（例如，返回按钮）

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

编辑：使用History.js的小演示注意：您需要在CodePen的debug视图中看到这一点，才能真正看到它正常工作。CodePen似乎提供了一个框架，防止您看到URL/标题的更改。

我建议在调试视图中使用这个示例。

一种方法是使用URL哈希：

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

您可以监听

hashchange

事件，但我建议使用和

$.address.externalChange

函数，因为它适用于不支持

hashchange

事件的旧版本IE

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

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

This.attr（'href'）的值是多少？或者请显示相关的HTML文件，你不能只显示标题位置吗$（location.attr（'href'，'）；什么

GET

变量？页面上的URL都没有任何参数。只需学习使用Meteor.js和iron router即可。它自动为您完成所有这些工作。完全使用ajax是个坏主意吗？我试着自学ajax，同时创造一种“现代”的浏览体验，但似乎我打破了一些不成文的网页设计规则。您觉得怎么样？您是否介意展示一段代码片段，说明在ajaxAnchor jquery中使用HistoryJS可能会是什么样子？好吧，我当然会提供某种NOSCRIPT回退，以通知未运行javascript的用户。当使用javascript运行时，现在很多网站都是一个完全空白的页面！很好的观察，让我说DAYYYYUM这个使用history.js的演示看起来很棒。带history.js的Ajax太棒了！我相信History.js在检测到HTML4时会自动使用哈希。

$('.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);
      });    
    }
});