如何在 URL 中使用带有井号标签的 GET 方法？

Question

例如：www.example.com#?id=10

到目前为止，我没有从 $_GET['id'] 获得任何价值。我尝试使用 JavaScript 从 URL 中删除主题标签，但没有任何反应：

$(document).ready(function(){
   $(window.location.hash).modal('show');
   $('a[data-toggle="modal"]').click(function(){
      window.location.hash.replace('#', '') = $(this).attr('href');
   });
});

我知道我可以使用 ajax，但在使用 GET 和 POST 时我不熟悉它。我正在尝试接受这个锚href：

echo '<a  href="?id='.$row['id'].'" id="smallbtn" data-toggle="modal"
                          data-target="#small"  data-modal="small">';

并在不刷新页面的情况下将其发送到 URL。有可能做到这一点吗？

Answer 1

您似乎混淆了 PHP 和 JavaScript，因为您显示的两个语句都来自双方。所以你的问题不是很清楚......

当你点击一个锚链接时，浏览器会这样做：

window.location = jQuery("#smallbtn").attr("href");

因此，如果这就是必须发生的一切（显然），您不必自己这样做。

现在，您提到了锚点 (#something)，但在您的示例中，您没有任何锚点。如果您当前在您的 URL 中有一个锚点，并且您试图在用户单击链接时摆脱它，那么这就是它的工作原理。再说一遍，没什么可做的。

如果“href”属性中可能有一个锚点并且您不想要它，那么您想做这样的事情：

var href = jQuery("#smallbtn").attr("href"),
    parts = href.split("#");

window.location = parts[0]; // ignore anything after the '#'

但是，无论哪种方式，这都会强制重新加载新位置。根据您所说，您想要“更改 URL”（在位置栏中）但不重新加载页面。这是使用浏览器的History API 完成的。现在大多数都支持该功能。

window.history.pushState(
    {
        "html": html,
        "pageTitle": page_title
    },
    "",
    url);

pushState() 定义页面 HTML、标题和 URL。它不会重新加载任何内容，也不会更改浏览器中的任何内容。那是你的责任。将改变的一件事是地址栏中的 URL。它被设置为“url”。

要更改浏览器标题，请执行以下操作：

document.title = page_title;

要更改您的浏览器 HTML（假设您要更改整个页面），您可以这样做：

jQuery(body).innerHTML = html;

不过，总而言之，您必须学习 AJAX。坦率地说，它只是使用jQuery.ajax 对象向您的 PHP 代码发送一个 GET 或 POST 请求，该请求以 XML 或 JSON 响应（XML 与 jQuery 很好，它可以像 DOM 一样解析它）并在您回调时使用该数据调用以更改客户端的标题、HTML 等。仅此而已！

我认为最难的部分不是 AJAX 本身，而是当您更改 DOM 时，现有的 jQuery() listeners 无法自动识别新标签这一事实。这种动态 DOM 处理使“AJAX”变得复杂，但它实际上并没有成为 AJAX 的一部分（因为 AJAX 只是发送 GET 或 POST 并处理答案。）