jQuery Address全站 AJAX 完整案例详解

作者:袖梨 2022-11-14

本文详细介绍如何利用 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> </div> </section> <section class="wrap-box"> <div class="g-tit"> <h2>相关文章</h2> </div> <ul class="s-list nobord notop"> <li> <a href="/art-424490.htm" class="s-card"> <div class="s-card-l"> <p class="tit">重返未来1999趋光性研究夜幕之外怎么玩 趋光性夜幕之外活动介绍</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-26</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241226/logo_676cea9d0ee421.jpeg" alt="重返未来1999趋光性研究夜幕之外怎么玩 趋光性夜幕之外活动介绍" /> </div> </a> </li> <li> <a href="/art-424488.htm" class="s-card"> <div class="s-card-l"> <p class="tit">光遇12.26大蜡烛在哪里 光遇12月26日大蜡烛位置攻略</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-26</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241226/logo_676cea972561b1.jpeg" alt="光遇12.26大蜡烛在哪里 光遇12月26日大蜡烛位置攻略" /> </div> </a> </li> <li> <a href="/art-424489.htm" class="s-card"> <div class="s-card-l"> <p class="tit">江南百景图金谷园怎么样 江南百景图金谷园建筑介绍</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-26</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241226/logo_676cea9c8c2ce1.jpeg" alt="江南百景图金谷园怎么样 江南百景图金谷园建筑介绍" /> </div> </a> </li> <li> <a href="/art-424487.htm" class="s-card"> <div class="s-card-l"> <p class="tit">光遇12.26每日任务怎么做 光遇12月26日每日任务做法攻略</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-26</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241226/logo_676cce83dcf8a1.jpeg" alt="光遇12.26每日任务怎么做 光遇12月26日每日任务做法攻略" /> </div> </a> </li> <li> <a href="/art-424486.htm" class="s-card"> <div class="s-card-l"> <p class="tit">光遇12.26季节蜡烛在哪里 光遇12月26日季节蜡烛位置攻略</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-26</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241226/logo_676cce82d6a891.jpeg" alt="光遇12.26季节蜡烛在哪里 光遇12月26日季节蜡烛位置攻略" /> </div> </a> </li> <li> <a href="/art-424484.htm" class="s-card"> <div class="s-card-l"> <p class="tit">光遇12.26复刻先祖在哪里 12月26日扫把头先祖复刻位置介绍</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-26</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241226/logo_676cce814774f1.jpeg" alt="光遇12.26复刻先祖在哪里 12月26日扫把头先祖复刻位置介绍" /> </div> </a> </li> </ul> </section> <section class="wrap-box"> <div class="g-tit"> <h2>精彩推荐</h2> </div> <ul class="card-box"> <li class="card3"> <a href="/app/101544.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241226/logo_676cb092a2bd71.png" alt="恐龙生存侏罗纪世界 安卓版v0.0.32" /> </div> <p class="figure-head">恐龙生存侏罗纪世界 安卓版v0.0.32</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/101536.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241226/logo_676cb0896d6171.png" alt="死神vs火影沃特水改版全人物 安卓版vwts_1.3.60" /> </div> <p class="figure-head">死神vs火影沃特水改版全人物 安卓版vwts_1.3.60</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/101529.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241226/logo_676cb077371b81.png" alt="小猫传奇免广告版 最新版本v64" /> </div> <p class="figure-head">小猫传奇免广告版 最新版本v64</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/101528.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241226/logo_676cb074f01b31.png" alt="街头搏斗 安卓最新版v3.2.2" /> </div> <p class="figure-head">街头搏斗 安卓最新版v3.2.2</p> <span class="figure-btn">下载</span> </a> </li> </ul> <ul class="card-box-b"> <li class="card10"> <a href="/app/101541.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241226/logo_676cb08e8831a1.png" alt="我的博物馆故事 官方安卓版v1.61.2" /> </div> <div class="figure-cont"> <p class="figure-head">我的博物馆故事 官方安卓版v1.61.2</p> <div class="figure-desc"> <span>模拟经营</span> <span>我的博物馆故事 官方安卓版v1.61.2</span> </div> <div class="figure-desc"> <p>我的博物馆故事是一款以消除为主题的经营养成类手游,在这里玩家</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/101531.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241226/logo_676cb07e2e4c11.png" alt="专业模拟飞行10 手机版v12.2.4" /> </div> <div class="figure-cont"> <p class="figure-head">专业模拟飞行10 手机版v12.2.4</p> <div class="figure-desc"> <span>模拟经营</span> <span>专业模拟飞行10 手机版v12.2.4</span> </div> <div class="figure-desc"> <p>专业模拟飞行10安卓版是一款飞行休闲手游,顶尖的物理飞行引擎</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/101526.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241226/logo_676cb06f772b01.png" alt="动物起义战斗模拟器二琳同款 最新版v4.1.1" /> </div> <div class="figure-cont"> <p class="figure-head">动物起义战斗模拟器二琳同款 最新版v4.1.1</p> <div class="figure-desc"> <span>模拟经营</span> <span>动物起义战斗模拟器二琳同款 最新版v4.1.1</span> </div> <div class="figure-desc"> <p>动物起义战斗模拟器是一个非常有趣的模拟类游戏,玩家可以召唤各</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/101519.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241226/logo_676cb05cef2841.png" alt="迷你世界七周年 安卓手机版v1.43.0" /> </div> <div class="figure-cont"> <p class="figure-head">迷你世界七周年 安卓手机版v1.43.0</p> <div class="figure-desc"> <span>模拟经营</span> <span>迷你世界七周年 安卓手机版v1.43.0</span> </div> <div class="figure-desc"> <p>迷你世界7周年是一款由《迷你世界》官方推出的庆祝特别版本,在</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/101514.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20241226/logo_676cb0544b9a61.png" alt="劫后公司无限资源版 v1.0.5.1" /> </div> <div class="figure-cont"> <p class="figure-head">劫后公司无限资源版 v1.0.5.1</p> <div class="figure-desc"> <span>模拟经营</span> <span>劫后公司无限资源版 v1.0.5.1</span> </div> <div class="figure-desc"> <p>劫后公司内置菜单版是游戏的破解版本,在该版本中为玩家提供了内</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> </ul> </section> <footer class="foot"> <a href="/" class="logo-icon"> <img src="/mobile/images/logo2.png" alt="一聚教程网"> </a> <p>Copyright © 2010-2022</p> <p>111cn.net All Rights Reserved</p> </footer> <script> var advData = {"img_fixed_pc_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e9729f58.jpg","img_fixed_mob_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e8793225.jpg","url_adv":"http:\/\/shop.hushen.cn\/shop\/c\/baojianpin.html","str_adv":"\u864e\u795e\u5546\u57ce\uff1a\u5173\u7231\u7537\u6027\uff0c\u66f4\u61c2\u7537\u4eba\u3002\u89e3\u51b3\u5927\u4f17\u7684\u7537\u8a00\u4e4b\u9690","img_popup_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e748238d.png","pc_show_img":"2","pc_show_popup":"2","pc_show_video":"2","mob_show_img":"2","mob_show_popup":"2","mob_show_video":"2","close_adv":"https:\/\/img.111cn.net\/uploads\/20240508\/663b20650801e.png","video_adv":"\/pc\/images\/pc-adv.mp4"}; </script> <script src="/jspc/funcmob.js" type="text/javascript"></script> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DSRRGRV1TL"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DSRRGRV1TL'); </script> <div class="back-top" style="display: block;"> <span class="icon-box"> <svg class="icon" viewBox="0 0 1024 1024"> <path d="M213.333333 640h170.666667v256h256v-256h170.666667l-298.666667-341.333333zM170.666667 128h682.666666v85.333333H170.666667z" fill="#0374f3"></path> </svg> </span> </div> </div> <script src="/js/stat.js"></script> </body> </html>