一聚教程网:一个值得你收藏的教程网站

热门教程

jQuery Address全站 AJAX 完整案例详解

时间:2022-11-14 22:03:26 编辑:袖梨 来源:一聚教程网

本文详细介绍如何利用 jQuery 框架以及 jQuery Address 插件实现最基本的全站 AJAX 动态加载页面内容的功能的方法。


案例目标
  以常见基本结构的网站为案例,实现全站链接 AJAX 加载页面内容,不刷新页面,不影响seo/seo.html">搜索引擎收录。同时兼容 WordPress。

功能实现
  需要提供给 jQuery Address 的有三个常量,分别是:

代码如下 复制代码

var baseurl = 'http://www.example.com/test/blog',
request_uri = '/test/blog/',
request_uri_host = 'http://www.example.com';

当网站根目录处于域名根目录时,三个常量的定义为:

代码如下 复制代码

var baseurl = 'http://www.111com.net',
request_uri = '/',
request_uri_host = 'http://www.111com.net';

以上定义这几个常量数据中的斜杠符非常重要,有误将导致通站 AJAX 链接不能工作。

主体功能实现程序如下:

代码如下 复制代码

// 全局变量:初始化完成标记
var is_loaded = false;

;(function($) {
$(document).ready( function() {

// 初始化 jQuery Address
$.address.state( request_uri_host ).init( function() {
// 绑定所有需要的链接,此处筛除了 WordPress 内部功能链接、Feed 订阅链接,以及新窗口链接
$("a[href^='"+baseurl+"']:not([href*='/wp-admin/']):not([href*='/wp-login.php']):not([href$='/feed/']):not([target='_blank'])")
.address();
// 当 URL 发生改变时的事件
} ).change( function(e) {
// 防止初始化时多余 AJAX 加载当前页面
if( is_loaded )
// AJAX 加载所点击的页面内容
my_load_page( $.address.state() + e.path );
is_loaded = true;
} );

// 页面初始化 JS 程序
my_init_after_ajax();

} );
})(jQuery);

// AJAX 获取新页面内容过程
function my_load_page( url ) {
// 显示 Loading 层
$('#loading').fadeIn();
// 调用 jQuery AJAX
$.ajax({
url: url, type: 'GET', dataType: 'html',
beforeSend: function() {},
success: function(data, textStatus, XMLHttpRequest) {
// 人性化淡入淡出并适时替换 #all 层内容,此处可以调整为所需的动画效果
$('#all').stop(true,false).animate( {'opacity': 0}, 500, function() {
$('html, body').scrollTop(0);
$('#all').html('').append( $('

'+data+'
').find('#all').html() )
.stop(true,false).animate( {'opacity': 1}, 500 );
// ... 除了修改 #all 层内容,此处还可以修改其它层以及 等 <br /> // 页面初始化 JS 程序 <br /> my_init_after_ajax(); <br /> } ); <br /> } <br /> }); <br /> } <br /> <br /> //页面初始化 JS 程序 <br /> function my_init_after_ajax() { <br /> // 隐藏 Loading 层 <br /> $('#overlay').fadeOut(); <br /> // ... 各种页面初始化 JS 程序 <br /> }</p> </td> </tr> </table> <p><br /> WordPress + jQuery Address</p> <p>应用于 WordPress 中,除了主体 JS 程序可以直接放入 Theme 的 JS 文件中,常量的定义需要 WordPress Theme PHP 传递给前台。实现方法如下:</p> <table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy9638')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy9638>// WordPress 加载 JS/CSS 文件回调过程,一般位于 Theme 的 functions.php 或其它包含文件 <br /> function my_enqueue_scripts_frontend() { <br /> <br /> // 加载 Theme 主样式表 style.css 文件 <br /> wp_enqueue_style( 'all', get_stylesheet_uri() ); <br /> <br /> wp_enqueue_script( 'jquery' ); <br /> wp_enqueue_script( 'jquery.address', get_stylesheet_directory_uri() . '/js/jquery.address.min.js', array( 'jquery' ) ); <br /> wp_enqueue_script( 'all', get_stylesheet_directory_uri() . '/js/all.js', array( 'jquery' ), false, true ); <br /> <br /> // 开启前端评论嵌套回复功能 <br /> if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); <br /> <br /> // 传递 JS 变量给已加载的名为 'all' 的 JS 程序,并封装在 'theme' 对象中 <br /> wp_localize_script( 'all', 'theme', array( <br /> 'baseurl' => home_url(), <br /> 'request_uri' => $_SERVER['REQUEST_URI'], <br /> 'request_uri_host' => ( ( isset( $_SERVER['HTTPS'] ) && $_SERVER['HTTPS'] == 'on' ) ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'], <br /> // 此处仍可传递其它实际需要的参数,如调用 WordPress 内置 AJAX 功能、调用 Theme 元素文件 URI 等 <br /> // 'ajaxurl' => admin_url( 'admin-ajax.php' ), <br /> // 'tplurl' => get_stylesheet_directory_uri(), <br /> ) ); <br /> <br /> } <br /> add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts_frontend' );</td> </tr> </table> <p><br /> 此 WordPress 案例 Theme 前端 /js/all.js 程序如下:</p> <table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy6050')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy6050>if( 'undefined' != typeof theme ) <br /> var baseurl = theme.baseurl, <br /> request_uri = theme.request_uri, <br /> request_uri_host = theme.request_uri_host; <br /> <br /> // ... JS 程序</td> </tr> </table></td> </tr> </table> <div class="articles"> <div class="tit02"> <h4>相关文章</h4> </div> <ul> <li> <a target="_blank" href="/new/401952.htm">《黑色沙漠手游》2022年6月16日微信每日一题答案</a> <span>05-01</span> </li> <li> <a target="_blank" href="/new/401950.htm">欢乐钓鱼大师锦标赛怎么拿高分 欢乐钓鱼大师锦标赛拿高分方法</a> <span>05-01</span> </li> <li> <a target="_blank" href="/new/401951.htm">欢乐钓鱼大师深渊幽鲶怎么钓 欢乐钓鱼大师深渊幽鲶钓取技巧介绍</a> <span>05-01</span> </li> <li> <a target="_blank" href="/new/401949.htm">欢乐钓鱼大师咆哮帝怎么钓 欢乐钓鱼大师咆哮帝获取技巧介绍</a> <span>05-01</span> </li> <li> <a target="_blank" href="/new/401947.htm">欢乐钓鱼大师收割者钓取技巧 欢乐钓鱼大师收割者怎么钓</a> <span>05-01</span> </li> <li> <a target="_blank" href="/new/401948.htm">欢乐钓鱼大师真彩虹怎么钓 欢乐钓鱼大师真彩虹获取技巧介绍</a> <span>05-01</span> </li> </ul> </div> </div> <div class="pages art-detail"> </div> </div> </div> </div> </div> <div class="hot-column"> <div class="cont"> <div class="tit"> <h4>热门栏目</h4> </div> <ul class="clearfix"> <li> <h6><a href="/list-1/" target="_blank">php教程</a></h6> <a href="/list-45/" target="_blank">php入门</a> <a href="/list-46/" target="_blank">php安全</a> <a href="/list-47/" target="_blank">php安装</a> <a href="/list-48/" target="_blank">php常用代码</a> <a href="/list-49/" target="_blank">php高级应用</a> </li> <li> <h6><a href="/list-2/" target="_blank">asp.net教程</a></h6> <a href="/list-78/" target="_blank">基础入门</a> <a href="/list-79/" target="_blank">.Net开发</a> <a href="/list-80/" target="_blank">C语言</a> <a href="/list-81/" target="_blank">VB.Net语言</a> <a href="/list-82/" target="_blank">WebService</a> </li> <li> <h6><a href="/list-6/" target="_blank">手机开发</a></h6> <a href="/list-208/" target="_blank">安卓教程</a> <a href="/list-209/" target="_blank">ios7教程</a> <a href="/list-210/" target="_blank">Windows Phone</a> <a href="/list-211/" target="_blank">Windows Mobile</a> <a href="/list-212/" target="_blank">手机常见问题</a> </li> <li> <h6><a href="/list-3/" target="_blank">css教程</a></h6> <a href="/list-99/" target="_blank">CSS入门</a> <a href="/list-100/" target="_blank">常用代码</a> <a href="/list-101/" target="_blank">经典案例</a> <a href="/list-102/" target="_blank">样式布局</a> <a href="/list-103/" target="_blank">高级应用</a> </li> <li> <h6><a href="/list-4/" target="_blank">网页制作</a></h6> <a href="/list-136/" target="_blank">设计基础</a> <a href="/list-137/" target="_blank">Dreamweaver</a> <a href="/list-138/" target="_blank">Frontpage</a> <a href="/list-139/" target="_blank">js教程</a> <a href="/list-140/" target="_blank">XNL/XSLT</a> </li> <li> <h6><a href="/list-7/" target="_blank">办公数码</a></h6> <a href="/list-236/" target="_blank">word</a> <a href="/list-237/" target="_blank">excel</a> <a href="/list-238/" target="_blank">powerpoint</a> <a href="/list-239/" target="_blank">金山WPS</a> <a href="/list-240/" target="_blank">电脑新手</a> </li> <li> <h6><a href="/list-11/" target="_blank">jsp教程</a></h6> <a href="/list-68/" target="_blank">Application与Applet</a> <a href="/list-69/" target="_blank">J2EE/EJB/服务器</a> <a href="/list-70/" target="_blank">J2ME开发</a> <a href="/list-71/" target="_blank">Java基础</a> <a href="/list-72/" target="_blank">Java技巧及代码</a> </li> </ul> </div> </div> <div class="footer"> <div class="cont"> <p> <a href="/" target="_self">一聚教程网</a>| <a href="javascript:;" class="about" target="_self">关于我们</a>| <a href="javascript:;" class="contact" target="_self">联系我们</a>| <a href="javascript:;" class="gg_contact" target="_self">广告合作</a>| <a href="javascript:;" class="friend_link" target="_self">友情链接</a>| <a href="javascript:;" class="copyright_notice" target="_self">版权声明</a> </p> <p> <span>copyRight@2007-2022 www.111CN.NET AII Right Reserved <a href="https://beian.miit.gov.cn/" target="_blank" class="beian"></a></span> </p> <p> <span> 网站内容来自网络整理或网友投稿如有侵权行为请邮件:111cn.com@163.com 我们24小时内处理 </span> </p> </div> </div> <script src="/jspc/func.js" type="text/javascript"></script> <script src="/js/stat.js"></script> </body> </html>