之前已写了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