利用jQuery来简单实现WordPress的全Ajax加载.
又来记录jQuery了 - - 人生啊~，因为那天和同事谈论EJB关于AJAX的东西，就想着自己的站了。现在站点已经完成了大部分链接的AJAX加载，jQuery实现，超级简单。用过jQuery的人都应该知道他的jQuery.ajax(options)，具体怎么用就不说了，API里都有，我的做法是因为每次打开文章只需要SINGLE部分，打开首页面之类只需要INDEX部分，所以呢HEADER,SIDEBAR,FOOT就加载一次就行了。
所以我在INDEX和SIDEBAR的相关部分加了一句：
1
2
3
4
5
6
7
8
9
10
11
| <?php
$glll=$_POST["glll"];
if ($glll != "ajax") {
get_header();
}
?>
<?php
if ($glll != "ajax") {
get_footer();
}
?> |
就是说判断什么时候来读取HEADER和FOOT，一般如果从搜索引擎或者其他链接进来是不会post一个值为ajax的参数glll的，所以我们在自己页面点击的时候就可以传这个参数进来判断他不去加载INDEX和SIDEBAR了。
然后在HEADER的末尾
1
| <div id="ajaxPost" style="margin:0; padding:0;"> |
和FOOT的最上面
这个ID叫ajaxPost的DIV就用做每次点击链接来替换相应内容，比如我首页输出了文章的标题链接我点击他来AJAX在当前页面：
1
2
| <!-- 这是我的文章标题链接 -->
<h2><a href="<?php the_permalink(); ?>" id="entry-post-<?php the_ID() ?>" title=" Link to <?php the_title(); ?> ...GL`LL." name="PostID-<?php the_ID() ?>" rel="bookmark"><?php the_title(); ?></a></h2> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <!-- 之后标题下直接添加相关JS -->
<script type="text/javascript">
jQuery('#entry-post-<?php the_ID() ?>').click(function() {
<!-- 点击之后再替换URL成"#",因为我觉得链接是要全部输出来才好，毕竟要让搜索引擎收录的。 -->
jQuery('#entry-post-<?php the_ID() ?>').attr("href","#");
<!-- #ajaxPost 在加载成功前就显示等待加载之类的文字 -->
document.getElementById("ajaxPost").innerHTML = "<div style="margin-bottom:800px; padding-left:60px; padding-top:20px;"><h2>等待加载...<?php the_title(); ?>.</h2><br><font style="font:Verdana; font-size:9px; color:#0000FF">Loading for life......</font> <img src="http://www.ll19.com/glll/images/busy.gif" border="0" /></div>";
jQuery.ajax({
<!-- 访问的链接 -->
url : "<?php bloginfo('home') ?>/?p=<?php the_ID() ?>",
<!-- 传入的用来判断的参数 -->
data : "glll=ajax",
dataType : "html",
<!-- 这里为了不让在请求后将data附加在URL上，所以请不要用默认的GET -->
type : "post",
success : function(message){
<!-- message 就是已经读取完毕的内容了 用innerHTML或者jQuery的方法输出到#ajaxPost都可以-->
document.getElementById("ajaxPost").innerHTML = message;
<!-- 下面是为了执行massage中的JS innerHTML后不能执行JS的问题也可以用这个方法轻松解决-->
var script = new Array();
script = jQuery("#ajaxPost script");
for (var i=0; i<script.length; i++) {
eval (jQuery(script[i]).html());
}
},
<!-- 抛出错误的话 -->
error : function(result) {
alert(result.responseText);
document.getElementById("ajaxPost").innerHTML = "<div style="margin-bottom:800px; padding-left:60px; padding-top:20px;"><h2>AJAX Error...<h2></div>";
}
});
});
</script> |
success会得到所访问地址返回的非错误页面（当然你可以设置他的类型，并非就非要是HTML）。比如PHP访问后输出的echo或者比如访问java的servlet后out.print();(不过做JAVA更多用DWR实现AJAX)。
error则得到返回的错误页面，result.responseText得到具体的错误信息。
也可以用一些比如slideDown和slideUp来让他更牛B的显示出来,最后觉得呢《奋斗》这片应该改名叫《吃喝玩乐谈对象》。
关于SEO的说明：JQuery是不用去掉a中的href加入onclick之类才能执行的，你完全可以输出所有的链接（不论是WP默认的http://****/?p=之类还是已经在后台设置了静态链接的.html之类），之后在页面的最下加入执行AJAX的JS，比如这个页面我输出的链接也是静态链接，你如果直接点击确实是AJAX来加载，不过如果是右键新窗口的话打开的就是他输出的链接，所以是不会影响搜索引擎收录的，因为你所有链接已经正常输出了。
如果是循环输出的链接也可以用循环的方法来执行ONCLICK事件，比如我下面的页数链接可以这么写
点击查看相关代码:(可以切换为全屏观看代码)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <?php wp_pagenavi()?>
<script type="text/javascript">
var pages = new Array();
<!-- .wp-pagenavi 是所有页数链接所在的父节点 会得到一个Array -->
pages = jQuery(".wp-pagenavi a");
for (var j=0; j<pages.length; j++) {
<!-- 之后就是循环让他执行了 -->
jQuery(pages[j]).click(function() {
<!-- 得到链接地址 注意AJAX访问有"#"的链接是会出错的 所以要判断一下 -->
var pageLink = jQuery(this).attr("href");
if (pageLink.indexOf("#")!= -1) {
pageLink = pageLink.split("#")[0];
}
jQuery(this).attr("href","#");
document.getElementById("ajaxPost").innerHTML = "<div style="margin-bottom:800px; padding-left:60px; padding-top:20px;"><h2>等待加载...LL19.com.</h2><br><font style="font:Verdana; font-size:9px; color:#0000FF">Loading for life......</font> <img src="http://www.ll19.com/glll/images/busy.gif" border="0" /></div>";
jQuery.ajax({
url : pageLink,
data : "glll=indexInfo",
dataType : "html",
type : "post",
success : function(message){
document.getElementById("ajaxPost").innerHTML = message;
var script = new Array();
script = jQuery("#ajaxPost script");
for (var i=0; i<script.length; i++) {
eval (jQuery(script[i]).html());
}
},
error : function() {
document.getElementById("ajaxPost").innerHTML = "<div style="margin-bottom:800px; padding-left:60px; padding-top:20px;"><h2>AJAX Error...<h2></div>";
}
});
});
}
</script> |
GL`LL JUST FOR FUN～
你这样做出来的地址栏不会变，比如在首页上点了某个文章标题，文章的内容是加载出来了，但地址栏显示的url还是首页的
AJAX就是这样啊~
想要做成页面AJAX,但是浏览器地址又要对应当前页面据我所知应该不行。
所以才在右上角每次都提示上次浏览过的地址防止AJAX失败返回不到之前的页面。
：你说那个有”#”没”#”是你点击的某个链接时候才会出问题，和你打开有没有”#”的链接后再AJAX没有关系。
我的站很早就解决这个问题了，你说的那个访问（http://www.ll19.com/jquery-wordpress-ajax.html#js104）点上面的GL’LL是无法返回首页的哦~应该早就解决了不会有这样的问题~
至于你打开AJAX的地址如果有”#”要么你就不去AJAX这个页，要么就自己截下字符串：
真的会出错哦~.
点击GL‘LL回主页的时候一直出现
等待加载…LL19.com.
Loading for life…….
然后就是出错了。.
难道是我网速？.
.
另：没有LL大大的本领，已经放弃全站Ajax了…囧
应该是网络问题 >_<
而且我做出来的网址后面有个#号…
删除了jQuery(’#entry-post-<?php the_ID() ?>’).attr("href","#");里面的,"#"会导致加载完Ajax之后又从加载的地址进去了。。。。
哈哈！老大出错了吧~
在这个页面（http://www.ll19.com/jquery-wordpress-ajax.html#js104）点上面的GL’LL是无法返回首页的哦~
readCosBetaCookie is not defined
我如此尝试，但是浏览器报错呢
而且我无法更改载入时的内容
谢谢，很棒的内容。
dddddddd
weweq
1111