如果 URL 使用 AJAX 动态更改，我如何使用 AJAX 或 PHP 向页面添加内容？答案

【问题标题】：If URL Changes Dynamically with AJAX, how could I add something to the Page with AJAX or PHP?如果 URL 使用 AJAX 动态更改，我如何使用 AJAX 或 PHP 向页面添加内容？
【发布时间】：2014-06-18 08:30:09
【问题描述】：

我的网站侧边栏中有一个过滤器，每当我点击其中一个选项时。它将 URL 更改为如下内容：/index.php?bfilter=45-Color[Blue] 和所有产品（这是 opencart 中的商店）也被更改。

这一切都很好，但我想在页面的不同部分添加一些内容。因此，每当 url 更改时，它都会在我指定的区域中的页面中添加一些内容。所以我决定用这个php：

  <?php if(isset($_GET['bfilter'])){ ?>
  // my divs here
  <?php } ?>

如果您刷新页面并设置它，这非常有用。但由于 URL 正在使用 ajax 更新，页面不会重新加载，因此它不会显示我的 div。

所以我的问题。如果 URL 更新，如何使用 AJAX 显示内容？

【问题讨论】：

url 正在使用 pushstate 进行更改，因此最好的办法是将代码放入更改 url 的部分或将 eventto 附加到 window.onhashchange

标签： php ajax dynamic

【解决方案1】：

Ajax 调用不应影响当前位置 url。事实上，如果位置 url 发生变化，它会触发重新加载，这会使 ajax 毫无意义。

您可以随时使用JS变量location.href查看当前url。但是如果你的 php sn-p 不起作用，那么也许你的 ajax 调用实际上并没有改变位置，而是使用HTML5 history API 来模拟行为。

如果是这种情况，那么您应该检查 ajax 函数回调中的 JS 变量 history.state.url。

console.log('Current Browse location', location.href);
console.log('History API location', history.state.url);

【讨论】：

【解决方案2】：

您需要做的是通过带有适当 URL 的 XMLHttpRequest 请求该页面。请参见下面的示例。 免责声明：这只是一个示例，不做任何验证，不应用于生产！

<div 
  id="filter" 
  data-filter-key="bfilter" 
  data-filter-value="45-Color[Blue]">Filter Me</div>

document.getElementById("filter").addEventListener('click', function(e) {
  var target = e.target || e.srcElement;
  var key = target.getAttribute('data-filter-key');
  var value = target.getAttribute('data-filter-value');
  var url = '/index.php?' + key + '=' + value;
  // do your ajax request with the url, and then inject the response into the DOM
});

【讨论】：