jquery.address-1.6.min.js实例:点击链接ajax加载页面内容,url同步更改不影响seo

之前已写了2篇关于ajax使用场景的文章总结,结合这篇文章,关于jquery ajax的使用,如果读者认证阅读完,掌握并熟练使用,那么使用ajax做一些常见开发是一点问题都没有了,而且可以大大缩短开发时间,使用ajax也可以提升用户体验。

另外2篇文章:
1)jquery ajax实例:鼠标滚动显示更多新闻,同时利于SEO,不用写服务器端代码【推荐】
2)phpcms利用ajax实现网站手机端”点击加载更多”功能【常用】

也可以在本网站输入关键词“ajax”,获取更多关于ajax使用的教程

本篇文章主要想通过ajax解决的问题是:点击页面上的超链接,ajax加载内容在当前页面显示,同时url地址同步更新,不影响前进/后退功能,不影响历史记录功能,不影响搜索引擎蜘蛛爬取

实现这个功能用到的插件是jquery.address-1.6.min.js

核心JS部分:

$(function () {
 $('img.lazyload,div.lazyload').lazyload({
 threshold: 200,
 effect: 'fadeIn'
 });
  
  
 var baseurl = "https://www.qulaba.com/eg/ajax/ajaxaddress";
 $.address.state(baseurl).init(function () {
 $('.js-content a').address();
 }).change(function (event) {
 refreshProductList(event.value);
 });
  
 function refreshProductList(href) {
 if(href == "/") return false;
 href = baseurl + href;
 var content = $('.content');
 $.ajax({
 type: "get",
 url: href,
 success: function (data) {
 var new_content = $(data).find(".content");
 content.hide().html(new_content.html()).stop().fadeIn();
  
 $('.content img.lazyload').lazyload({
 threshold: 200,
 effect: 'fadeIn'
 })
 }
 });
 }
 })

注意: jquery.address.js里,所有a标签里的地址以及js里的baseurl都要用绝对地址才行,可以参考发的实例,否则不能正常运行

jquery.address-1.6.min.js实例下载,需要放服务器端才能运行

点击查看jquery.address-1.6.min.js的实际运行效果

其他参考文档:
插件 jQuery.address.js 中文API文档
浅析jQuery Address Plugin

相关推荐