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显示部分参考本站。

赏