代码之家  ›  专栏  ›  技术社区  ›  Naveed

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

  •  2
  • Naveed  · 技术社区  · 14 年前


    当我使用 http://practice.dev/ 索引.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>
    

    一个.phtml :

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

    两个.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]);
                }
            });
        });
    });
    

    当我单击linkone时,字符串“one”被加载到contentdiv中,但地址栏仍然是 http://practice.dev/index/one

    当我单击link two时,字符串'two'被加载到contentdiv中,但地址栏仍然是 http://practice.dev/index/two

    怎么可能?

    谢谢

    2 回复  |  直到 13 年前
        1
  •  2
  •   Community Mr_and_Mrs_D    7 年前

    删除 event.preventDefault(); href

    根据OP的更多信息编辑

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

    http://practice.dev/index/one 它还需要一个hash标签版本,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以加载特定的页码。

        2
  •  2
  •   BoltClock    14 年前

    这是:

    event.preventDefault();
    

    document.location.href )不会导致浏览器重定向。甚至改变碎片( document.location.hash )将导致“滚动”(取决于浏览器窗口是否小到可以滚动)。

    如果你想让你的页面可以被Google索引,尽管有Ajax和Ajax修改的url, start your fragments with ! 允许Google抓取你的Ajax页面。