Question

我有合理的理由去做我想解释的事情。我有一个现有网站说abc.com有常规页面等等所有用PHP编写的。现在我想对网站进行AJAX化，即当用户点击链接时，它应该使用AJAX获取链接并替换页面内容。这是简单的部分，我可以使用jQuery get函数实现它。

现在，当用户为页面添加书签时，问题就出现了。我可以使用哈希标记来指定用户是否在另一个页面上，但是不是使用javascript再次获取新页面，是否可以在调用页面时使用PHP直接获取它。

请你给我一个如何实现上述目标的大纲。此功能类似于Facebook。

谢谢你的时间。

Answer 1

这是一个相当简单的过程（1）解析哈希标记，（2）像往常一样通过Ajax加载内容。

如果您在用户点击页面时加载更多内容，请确保始终正确修改哈希标记以反映页面上的内容。

这是a quick example可以玩的。单击名称并记下哈希标记。相关的Javascript看起来像这样：

// Go straight to content if it's in the hash.
$(document).ready(function(){
   load_story_from_hash();
});

// Call this function whenever user clicks on a hash link
function set_hash(hash){
   window.location.hash = hash;
   load_story_from_hash()
}

// Actually load content based on the hash in the URL
function load_story_from_hash(){

   var hash = window.location.hash;
   hash = hash.replace(/^#/, '');

   if (hash) {

      $('#post_container').load(hash+'.html', {}, function(){
         $.scrollTo('#post_container', 1000);
      });

   }

}

Answer 2

答案是否定的，您无法获取URL哈希服务器端的值。请参阅How to get Url Hash (#) from server side。

您必须获取客户端的哈希值并提出额外请求。

Answer 3

jQuery历史是我的首选。它可以在这里找到：http://www.balupton.com/projects/jquery-history/提供跨浏览器支持，绑定到哈希，重载哈希，所有其余的。

还有一个名为jQuery Ajaxy的Ajax扩展，允许它轻松地将您的网页升级到正确的Ajax应用程序，而无需服务器端更改，并保持SEO和JS-Disabled友好：http://www.balupton.com/projects/jquery-ajaxy/

这是http://wbhomes.com.au/和http://www.balupton.com

等网站选择的解决方案

总体而言，他们都有良好的文档记录，支持和功能丰富。他们还在这里赢得了一个赏金问题How to show Ajax requests in URL?

Answer 4

您可以使用其中一种工具或自行推送。使用window.location.hash和其他技巧。

Answer 5

我最近写了一篇关于这个确切问题的文章。这篇文章是教程风格。使用散列更改事件，即时通讯显示如何向url添加参数，这可以触发具有无限数量参数的ajax请求，因此以相当可扩展的方式运行。

您可以在http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/

找到更多相关信息

第一部分介绍了如何响应哈希链接，而第二部分介绍了如何将哈希URL中的数据发送到ajax请求，从而允许您在网址中的哈希标记中执行任何您想要的操作。

Answer 6

执行此操作的最佳方法是使用一个index.php，根据其后的URL部分加载所有其他页面。例如：

http://www.example.com/index.php/reports/employees/hoursWorked

在这种情况下，index.php将运行，它可以看到所请求的是小时工作报告，并加载该内容。问题是，如果index.php然后使用AJAX加载所有其他内容，浏览器中的URL将永远不会改变。

解决该问题的一种方法是在每个包含该URL形式的页面上放置“链接到此页面”链接，以便用户收藏书签。

AJAXify网站

6 个答案: