wordpress调用ajax刷新,WordPress Ajax加载实例

2年前 (2019-08-29) | 3,899 views | 16 条评论 | 本文共2359个字

朗读这篇文章

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

jQuery代码：

//最新评论

$('#lianxi').live('click', function(e) { //通过顶部lianxi按钮来触发

e.preventDefault();

function ajaxs() {

$.ajax({

url: '/?action=ajax',

type: 'get',

beforeSend: function() {

$('#ajaxpinglun').empty().html('

Ajax加载中....

') //显示loading

},

error: function(a) {

$('#ajaxpinglun').hide().empty().html('

没加载

').fadeIn('fast') //错误时输出

},

success: function(a) {

$('#ajaxpinglun').empty().html(a) //成功时输出

}

});

return false

};

ajaxs();

});

页面：

php function获取数据：

##评论排行和评论

function AjaxLoad() {

if (isset($_GET['action'])) {

if ($_GET['action'] == 'ajax') {

//获取最新评论代码或想显示的内容

echo '

';

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

".get_avatar($comment, 32,'',$comment->comment_author)." ID) ."#comment-" . $comment->comment_ID . "\" title=\"发表在： " .$comment->post_title . "\">" .strip_tags($comment->comment_author).":
". strip_tags($comment->com_excerpt)."";

}

$output .= $post_HTML;

echo $output;

echo '';

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

赏