JQuery-WordPress的全站Ajax加载

By19.Published on七月 12, 2008 5:15. 532 Views .
很差差一般好非常好 (4 次评分, 平均: 4.75 out of 5)
Loading ... Loading ...

利用jQuery来简单实现WordPress的全Ajax加载.

现在站点已经完成了大部分链接的AJAX加载。我的做法是因为每次打开文章只需要SINGLE部分，打开首页面之类只需要INDEX部分，所以HEADER,SIDEBAR,FOOT就加载一次就行了。

在INDEX和SINGLE的相关部分加了一句：

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的，所以我们在自己页面点击的时候就可以传这个参数进来判断他不去执行HEADER,SIDEBAR,FOOT之类了。

然后在HEADER的末尾

1
2

<div id="ajaxPost" style="margin:0; padding:0;">
</div>

和FOOT的最上面

1

 

这个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>&nbsp;&nbsp;&nbsp;<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><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><h2></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来加载，不过如果是右键新窗口的话打开的就是他输出的链接，所以是不会影响搜索引擎收录的，因为你所有链接已经正常输出了。

继续阅读…Continue reading…

{ 29 comments } { Tags: , , }
jQuery简单实现WordPress的Ajax留言

jQuery简单实现WordPress的Ajax留言

By19.Published on十一月 2, 2007 13:12. 217 Views .
很差差一般好非常好 (2 次评分, 平均: 4.50 out of 5)
Loading ... Loading ...

利用jQuery插件(jQueryForm)来超级简单实现WordPress的ajax留言.

也有很多类似的WordPress插件，以前也用过PHOTOTYPE的AJAX留言插件，但是根据自己站的情况来做的话会省去很多不必要的代码，而且安装太多插件站点变慢也是肯定的。

jQueryForm：http://www.malsup.com/jquery/form/

ajax留言用到jQueryForm插件，jQueryForm是jQuery提交整个表单最好用的插件之一，下面一个例子（拿WP的留言表单举例）：

1
2
3
4
5
6
7
8

<form action="***/***.php" method="post" id="commentform">
<input type="text" name="author" id="author" value="" tabindex="1"/>
<input type="text" name="email" id="email" value="" tabindex="2"/>
<input type="text" name="url" id="url" value="" tabindex="3" />
<textarea name="comment" id="comment" tabindex="4"></textarea>
<input name="submit" type="submit" id="submit" tabindex="5" value="(Submit comment)"/>
<input type="hidden" name="comment_post_ID" value="postid" />
</form>

之后下面加入这段JS：

1
2
3
4
5
6
7
8
9
10

$('#commentform #submit').click(function() {
   $('#commentform').ajaxForm(function() { 
   	success: function(result) {
    alert("Thank you for your comment!"); 
	},
	error : function(result) { 
	alert(result.responseText); 
	}
    }); 
}

则在SUBMIT的时候便会根据你FORM中的ACTION和METHOD来自动完成AJAX的操作，SUCCESS是提交成功后要做的，ERROR则是发生错误返回的错误页面，result.responseText得到错误信息（WP中的WP_DIE()）。

在WP中我具体是这样写的，commentform提交时会显示一个DIV提示“等待”或者“留言成功”以及“提交错误”，留言成功后便会在适当位置把留言的内容输出出来：

页面适当位置加入这段HTML，用来显示提交后的结果：

1
2
3
4
5
6
7
8
9
10
11
12
13

 
<!--提交成功后显示当前留言内容以及提交错误显示错误信息-->
<div class="entry-commentlist" id="comments-ajax-you" style="display:none">
<ol class="commentlist">
<li class="reply" onMouseOver="jQuery(this).css({background:' #FFFFFF ', border:'1px solid #ccd0d6'})"  onMouseOut="jQuery(this).css({background:' #ECEEF0 ', border:'1px solid #cdd1d1'})" id="comment-ajax-id">
<div class="commentcount">YOU.</div>
<cite id="output-commenttext-name"></cite>
<small class="commentmetadata">This...Your comment...</small>
<br />
<div id="output-commenttext-ajax"><p></p></div>
</li>
</ol>
</div>

页面适当位置加入这段，用来显示提交的过程：

1

<div id="output-comment-ajax"   class="output-this"></div>

下面的JS是调用jQueryForm插件的函数完成具体的AJAX提交了：

这里当提交发生错误时（比如未填写内容或者EMAIL格式错误，留言重复等等）返回的错误信息result.responseText由于WP的WP_DIE()返回的是一个页面，所以这里我用截字符串的方法取到的这个正确的返回信息（或者用别的方法，总之只要正确取到抛出的错误就行）。

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

jQuery.noConflict();
jQuery('#commentform #submit').click(function() {
jQuery('#output-comment-ajax').fadeTo(1,1).html("<b>Waiting</b> - <b>等待.提交中......</b> - GL`LL.").toggle("slow");
jQuery('#comments-ajax-you').hide("slow");
var commentauthor = jQuery('#commentform #author').val();
var commentvalue = jQuery('#commentform textarea').val();
jQuery("#commentform").ajaxForm({
success: function(result) {
 	jQuery('#output-comment-ajax').html("<b>Thank you for your comment!</b> - <b>提交成功.多谢留言......</b> - GL`LL.").fadeTo(1,1).fadeTo(4000,0, function(){jQuery('#output-comment-ajax').toggle("slow")}); 
	jQuery('#comments-ajax-you').slideDown("slow"); 
	jQuery('#comments-ajax-you .commentcount').empty().html("YOU!!");
	jQuery('#comments-ajax-you #output-commenttext-name').empty().html(commentauthor);
	jQuery('#comments-ajax-you #output-commenttext-ajax p').empty().html(commentvalue);
},
error : function(result) {
 	jQuery('#output-comment-ajax').html("<b>Error!</b> - <b>提交留言发生错误......</b> - GL`LL.").fadeTo(1,1).fadeTo(4000,0, function(){jQuery('#output-comment-ajax').toggle("slow")}); 
	jQuery('#comments-ajax-you').slideDown("slow"); 
	jQuery('#comments-ajax-you .commentcount').empty().html("ERROR!!");
	jQuery('#comments-ajax-you #output-commenttext-name').empty().html(commentauthor);
	jQuery('#comments-ajax-you #output-commenttext-ajax p').empty().text(result.responseText);
	var temp = jQuery('#comments-ajax-you #output-commenttext-ajax p').text();
	if (temp.indexOf("error-page") > -1) {
	temp = temp.split("<p>")[1].split("</p>")[0];
	jQuery('#comments-ajax-you #output-commenttext-ajax p').empty().html("<h2>"+temp+"</h2>");
	}
}
}); 
});

大体过程就是这样。这里提交成功后只是简单的把页面上的FORM相关内容再显示了一遍，很多插件都是写了一个类似wp-comments-post的PHP就是为了把留言的内容在从新ECHO出来，真觉得没这个必要，这内容页面上不都有么 – 。-。

继续阅读…Continue reading…

{ 66 comments } { Tags: , , , }
Page 2 of 212