Question

我试图理解 - 是否有任何方法要求浏览器在用户点击时不刷新整个页面。可以看到哈希添加方法 - 我需要另一种方法，使用没有哈希的链接。可能应该发送任何标题？还是别的什么？

我想处理只返回HTML（或特殊js命令）部分的GET查询，而不是所有页面，并以AJAX风格处理它。

Answer 1

您可以通过jquery ajaxify您的链接。像这样：

$('a.ajax').click(function(ev){
    ev.preventDefault();
    var target=$(this).attr('data-target');
    var url=$(this).attr('href');
    $(target).load(url+' '+target);
}

这可以与以下HTML一起使用：

<div id="output">
 Hello <a href="world.html" class="ajax" data-target="#output">World</a>
<div>

并且在world.html中你需要：

<div id="output">
  Foo bar baz boo
</div>

理论上，这应该将dif的内容从“world”文件加载到第一个文件中的div中，但我还没有尝试过。我认为这是你需要的，因为常规链接仍然存在，谷歌将正确索引这绕过ajax，你的用户将很高兴看到页面的一部分发生变化。

Answer 2

你可以做'假的'链接做这样的事情：

<span style="cursor:pointer;" onclick="loadPage('mypagename');">My Link</span>

然后该功能将是：

function loadPage(pageName){
    // do ajax call here using pageName var
}

Answer 3

当用户点击带有网址的超链接时，您无法阻止导航。使用哈希值导航或让超链接调用JavaScript通常是在单个页面内添加导航的方法。

但是，如果您尝试转换现有页面并非以这种方式设计，则必须使用JavaScript来修改超链接，以便它们调用Ajax。例如：

var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {

    var oldUrl = links[i].getAttribute('href');
    links[i].setAttribute('href', 'javascript:void(0)');

    links[i].onclick = (function(url) {
        return function() {
            // Then you can do your AJAX code here
        }
    })(oldUrl);
}

我建议您不要做这样的事情，而是考虑到AJAX设计创建您的页面。

Answer 4

使用Html5历史记录API可以实现更改网址而不使用哈希：http://html5demos.com/history

旧浏览器不支持，因此您必须始终有后备。

如何让浏览器在进入URL时不刷新整页？

4 个答案: