Question

我在Zend Framework中使用AJAX / JSON组合。每当我单击应用程序中的任何链接时，都会调用AJAX请求并在DIV中成功加载内容但地址栏保持不变。如何根据当前的活动操作更改地址栏。

这是我的工作代码：

当我使用http://practice.dev/时，我的 index.phtml 文件被加载。

<a href='http://practice.dev/index/one' class='ajax'>One</a>
<a href='http://practice.dev/index/two' class='ajax'>Two</a>

<div id="content">content comes here</div>

one.phtml ：

$jsonArray = array( 'content' => 'One' );
echo Zend_Json::encode( $jsonArray );

two.phtml ：

$jsonArray = array( 'content' => 'Two' );
echo Zend_Json::encode( $jsonArray );

JS代码

jQuery(document).ready(function(){
    jQuery('.ajax').click(function(event) {
        event.preventDefault();
        jQuery.getJSON(this.href, function(snippets) {
            for(var id in snippets) {
                jQuery('#' + id).html(snippets[id]);
            }
        });
    });
});

当我点击链接1时，字符串'One'将加载到内容DIV中，但地址栏仍然是http://practice.dev/。它应该是http://practice.dev/index/one

当我点击链接2时，字符串'Two'被加载到内容DIV中，但地址栏仍然是http://practice.dev/。它应该是http://practice.dev/index/two

怎么可能？

由于

Answer 1

此：

event.preventDefault();

是阻止地址栏更新的原因。

我不相信有一种方法可以在不导致浏览器重定向的情况下更改URL（document.location.href）本身。即使更改片段（document.location.hash）也会导致“滚动”（取决于浏览器窗口是否足够小以便滚动）。

编辑：好吧，只有当你的页面中存在这样的锚时，它才会导致滚动到相应的锚，正如Pekka所说。所以我想你可以尝试一下。

如果您希望Google可以将您的网页编入索引，而不管使用Ajax和经过Ajax修改的网址，start your fragments with !允许Google抓取您的Ajax网页。

Answer 2

删除event.preventDefault();，这会停止发生链接的默认行为。默认行为是 - 转到href属性中的网址。

根据OP中的更多信息进行编辑

您需要让您的javascript响应哈希标记。

而不是像这个http://practice.dev/index/one那样拥有一个URL模式，它也需要一个哈希标签版本，javascript可以像这样http://practice.dev/index#one处理。这意味着如果有人访问了页面http://practice.dev/index#two，您的javascript就会知道它需要去获取第二页，即使Zend已经有了第一页。

在您的javascript中，您可以使用

获取哈希标记

var hash = location.hash;

并使用

设置

location.hash = "two";

有关此here

的更多信息

因此请保持链接与此http://practice.dev/index/one相同，但在用户点击链接时向网址添加哈希标记，您可以在地址栏中添加哈希标记。如果页面加载时存在哈希标记，请更改您的javascript以加载特定页码。

使用AJAX时为什么浏览器的地址栏不变？

这是我的工作代码：

2 个答案: