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

本文来自： http://www.ll19.com/plugin-jquery-wordpress-search-ajax-comment.html

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

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

  1. koobai koobai 说： ( Has commented 1 times in LL19.com )
    十一月 29, 2009 21:52 于 9:52 下午

    看下效果，再来细看~~~

    回复 |  回复并邮件
  2. gaoav gaoav 说： ( Has commented 1 times in LL19.com )
    十一月 20, 2009 9:00 于 9:00 上午

    既然进来了，就留个脚印

    回复 |  回复并邮件
  3. 独孤逸辰 独孤逸辰 说： ( Has commented 1 times in LL19.com )
    十一月 16, 2009 20:38 于 8:38 下午

    测试一下吧

    回复 |  回复并邮件
  4. edikud edikud 说： ( Has commented 1 times in LL19.com )
    八月 10, 2009 13:56 于 1:56 下午

    测试一下

    回复 |  回复并邮件
  5. Karwin Karwin 说： ( Has commented 1 times in LL19.com )
    四月 28, 2009 5:13 于 5:13 上午

    正想学习jQuery, 感谢了, 我自己琢磨去…

    回复 |  回复并邮件
  6. D.Chou（也许您应该叫我“每日一雷”...囧orz） D.Chou（也许您应该叫我“每日一雷”...囧orz） 说： ( Has commented 2 times in LL19.com )
    一月 15, 2009 3:18 于 3:18 上午

    BTW，我为什么用您的方法ajax留言，留好了没有在您页面上会出现的”YOU!!”这个框。。。我们代码都一样呀。。。

    回复 |  回复并邮件
  7. D.Chou（也许您应该叫我“每日一雷”...囧orz） D.Chou（也许您应该叫我“每日一雷”...囧orz） 说： ( Has commented 2 times in LL19.com )
    一月 15, 2009 3:15 于 3:15 上午

    老大，我每日一雷又来了…Jquery查询的问题：
    我的操作过程：建Search.php（改了你search value那里的网址），在home.php的have_posts上面加Href和3个DIV，引入Javascript，在home最下面加2个JS。iframe.js和Search.php放在主题文件夹下。
    本地测试，发现原来iframe content那个Href是你的说明文字，在Home上显示了一个超明显的链接，晕，删掉。查询，弹出新窗口（？在你这里测试是在首页第一篇文章上面出来的），里面能看到我要查的东西，但是下面Fatal Err是Search.php的第41行edit_post_link，发现有一个search_meta_sep的Class，怀疑是CSS定义，删除全部search_meta_sep,实现查询，但是由于Home页在新窗口弹出来的时候已经自己关闭了，没有Close，查询时候也没有红色提示条。
    问题：1，为什么会弹出新窗口？2，为什么没有提示条和Close按钮？3，search_meta_sep的class是干什么的，您是不是没发它的css。。。
    每日一雷。。。THX

    回复 |  回复并邮件
  8. 小说 小说 说： ( Has commented 1 times in LL19.com )
    一月 14, 2009 19:49 于 7:49 下午

    很好，很强大

    回复 |  回复并邮件
  9. D.Chou D.Chou 说： ( Has commented 3 times in LL19.com )
    一月 13, 2009 0:18 于 12:18 上午

    额，老大我超白痴的，什么叫“页面适当的位置”啊。。。代码能看懂。。。但是不知道往哪里插。。。这就是传说中的半瓶水。。。可是弱弱滴，偶这半瓶有点邪。。。

    回复 |  回复并邮件
    • 19. 19. 说： ( Admin commented )
      一月 13, 2009 9:36 于 9:36 上午

      适当位置放入的那个DIV（output-comment-ajax）是用来提示用户正在留言的，你在这里留言应该也能看到就是那条红色的“提示线”，这部分建议放在留言表单中的textarea上面。另外一个DIV（entry-commentlist）是用来显示提交成功后的提交留言的，这个建议放在表单上面，至于JS只要放这页面里就行了。

      回复 |  回复并邮件
      • 匿名 匿名 说： ( Stranger commented in LL19.com )
        一月 13, 2009 13:20 于 1:20 下午

        哇，回的好快耶，你的站是技术流派的。。。以后多学习。。。write less，do more。。。顺便看看“红线”在哪里

        回复 |  回复并邮件
      • D.Chou D.Chou 说： ( Has commented 2 times in LL19.com )
        一月 13, 2009 14:19 于 2:19 下午

        老大，想问一下截字符串那个JS是不是在comments.php里面引入了JS框架后随便写在哪个位置？我写在页面最下面结果在单个文章read full post后直接没有comment界面了。。。

        回复 |  回复并邮件
      • D.Chou D.Chou 说： ( Has commented 2 times in LL19.com )
        一月 13, 2009 14:37 于 2:37 下午

        在老大的帮助下成功搞定。。。原来Jquery代码前后要加…的。。。

        回复 |  回复并邮件
  10. kane kane 说： ( Stranger commented in LL19.com )
    十二月 25, 2008 9:16 于 9:16 上午

    顶

    回复 |  回复并邮件

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

文章回复(Leave a reply):

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