Some print.
Some print.

jQuery简单实现WordPress的Ajax留言

By19.Published on2007-11-2.

利用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出来，真觉得没这个必要，这内容页面上不都有么 – 。-。

{ Tags: , , , }

(查看之前文章)    »    |    (查看之后文章)    »    |


这篇文章发布于 2007年11月2日，星期五，1:12 下午，归类于 Diary。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。



51 Responses to “ jQuery简单实现WordPress的Ajax留言 ”

  1. Fanr 说： ( Has commented 1 times in LL19.com )
    2010-09-1 于 10:10 下午

    试试~

    回复 |  回复并邮件
  2. zwwooooo 说： ( Has commented 1 times in LL19.com )
    2010-08-20 于 10:48 上午

    没搞成功，试试效果

    回复 |  回复并邮件
  3. 向晚 说： ( Has commented 1 times in LL19.com )
    2010-08-5 于 9:56 上午

    不错，试下效果。。

    回复 |  回复并邮件

回复分页(Comments pages):     « 早前评论   

文章回复(Leave a reply):

注意: 评论者允许直接点击留言人下方的“回复并邮件”按钮将自己回复的评论邮件通知另外评论者。点击“回复”按钮则只回复不发邮件。