WordPress Ajax加载实例

有人问我这个主题的顶部Ajax无刷新加载评论是如何实现的,简单整理一下,看下代码应该就明白了。

jQuery代码:

//最新评论
$('#lianxi').live('click', function(e) { //通过顶部lianxi按钮来触发
e.preventDefault();

function ajaxs() {
$.ajax({
url: '/?action=ajax',
type: 'get',
beforeSend: function() {
$('#ajaxpinglun').empty().html('<div style="text-align:center;padding:20px;">Ajax加载中....</div>') //显示loading
},
error: function(a) {
$('#ajaxpinglun').hide().empty().html('<div style="text-align:center;padding:20px;">没加载</div>').fadeIn('fast') //错误时输出
},
success: function(a) {
$('#ajaxpinglun').empty().html(a) //成功时输出
}
});
return false
};
ajaxs();
});

页面:

<div id="lianxi"></div> --这个是按钮

<div class="lxpanel"><div id="ajaxpinglun"></div></div> --显示的div层

php function获取数据:

##评论排行和评论
function AjaxLoad() {
if (isset($_GET['action'])) {
if ($_GET['action'] == 'ajax') {
//获取最新评论代码或想显示的内容

echo '<div class="rc_comments">';
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,comment_author_url,comment_author_email, SUBSTRING(comment_content,1,16) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' AND user_id='0' AND comment_author != '郑永' ORDER BY comment_date_gmt DESC LIMIT 6";
$comments = $wpdb->get_results($sql);
//$comment->comment_content=preg_replace('#\[img\](.*)\[/img\]#','[图]',$comment->comment_content);
$output = $pre_HTML;
foreach ($comments as $comment) {
$output .= "\n<li>".get_avatar($comment, 32,'',$comment->comment_author)." <a href=\"" . get_permalink($comment->ID) ."#comment-" . $comment->comment_ID . "\" title=\"发表在: " .$comment->post_title . "\">" .strip_tags($comment->comment_author).":<br/>". strip_tags($comment->com_excerpt)."</a><br /></li>";
}
$output .= $post_HTML;
echo $output;
echo '</ul>';
die;

}
}
}
add_action('init', 'AjaxLoad');

 

CSS:

#ajaxpinglun {
padding:0 15px 15px;
max-width:280
}

.lxpanel {
position:absolute;
top:62px;
right:45px;
border:1px solid #DDD;
z-index:999
}

#lianxi {
position:absolute;
top:17px;
right:90px;
width:23px;
height:20px;
border:1px solid #999;
cursor:pointer;
z-index:999;
border-radius:4px
}
#lianxi:before {
display:block;
position:absolute;
left:20%;
top:100%;
width:0;
height:0;
border-left:9px solid #999;
border-right:7px solid transparent;
border-bottom:7px solid transparent;
content:''
}

PS:后来又上传了具体代码,试试吧,应该可以。如果还是不行,你还是看这个教程吧:https://www.google.com.hk/search?hl=zh-CN&q=wordpress ajax加载数据,按钮和css显示部分参考本站。

分类:网络博客 标签:,,

上一篇:阿根廷共享电动踏板车

下一篇:阿根廷的经济早已崩溃了

已经有14条评论!

Loading...
  1. 抢沙发,好像是我问的,感谢博主无私分享 [坏笑]

    沙发!
  2. 博主,没搞定啊,按这些弄了,老是加载首页,不加载评论哇!

    板凳!
  3. 非技术的路过。

    地板!
  4. 我之前也弄了!但是js都失效了!后来上网看了下、太费劲了。就放弃了

    4F
  5. 正在你网站上听音乐~

    5F
  6. 不懂的人就如我 只能呵呵

    6F
  7. 这段代码实现只是针对你这个主题的吧 [坏笑]

    7F

怎么样?你也说一句吧!

gravatar

冷笑 忧伤 恶魔 笑脸 红脸 咧嘴笑 吃惊 惊讶 困惑 耍酷
大笑 抓狂 痛苦 转眼珠 眨眼 好主意 囧 无表情 哭泣 坏笑