WordPress 通过 Ajax 响应请求，实现延迟加载或者异步加载

在网站留言板有个访客评论自动排第一的功能，之前是这样做的：

把以下代码放入 functions.php 文件内。

/***
* 黑鸟博客出品
******/
function AutoFirst(){
    global $wpdb;
    $queryaf="select comment_author, comment_author_url, comment_date from $wpdb->comments where comment_ID in (select max(comment_ID) from $wpdb->comments where comment_approved='1' and comment_author_url !='' and user_id='0'  GROUP BY comment_author_email)  ORDER BY comment_date DESC LIMIT 20";
    //这边取20条数据
    $wally = $wpdb->get_results($queryaf);
    foreach ($wally as $commentaf){
        $tmpy= "<li><span style=\"color:#000000\">• </span><a target=\"_blank\"  rel=\"nofollow\" href=\"https://guihet.com/go.php?url=".$commentaf->comment_author_url."\">".$commentaf->comment_author."</a></li>";
        $outputy .= $tmpy;
    }
    $outputy = "<ul class=\"liuyanpage-one\" style=\"padding-left: 0px;\">".$outputy."</ul>";
    echo $outputy ;
}

本站参考样式：

/***
* 留言版评论自动排第一 - 黑鸟博客出品
******/
 
.liuyanpage-one ul{color:rgba(255,255,255,.15);font-size: 14px;;overflow: hidden}
 .liuyanpage-one ul:after{content:" ";clear:both;display:block}
.liuyanpage-one li{float:left;width:20.0%;position:relative;transition:all .3s ease-out;border-radius:5px;line-height:1.5;height:26px;display:block;    overflow: hidden;padding:0px 10px 0px 0px;}
.liuyanpage-one li:hover{background:rgba(230,244,250,.5)}
.liuyanpage-one li a{padding:0px 0px 0px 2px;color:#000000;overflow: hidden}
@media screen and (max-width:760px) {
.liuyanpage-one li{width:50%}
.liuyanpage-one ul{padding-left:5px}}
@media screen and (min-width:768px) and (max-width:990px){
.liuyanpage-one li{width:20%}
.liuyanpage-one ul{padding-left:5px}}

在需要调用的域名直接使用以下代码调用即可

<div>< ?php AutoFirst(); ?></div>

这样就基本可以用了，但是缺点也很明显，网站的留言板每次打开都得等上大几秒才开始显示页面，相当的影响访客体验。

AJAX 功能测试

站长首先想到的是不是可以延迟加载或者异步加载，我这一菜鸟本来还在找怎么通过 JavaScript 异步调用 PHP 函数，转了一圈明白自己多么二愣子，大家回答基本一致的，这基本只能 ajax 通过 get 或 post 提交数据请求服务器地址，再通过返回的值来处理。

首先还是在 wordpress 主题的 functions.php 函数内添加以下代码：

function fun_hello_world(){
    echo '恭喜你，服务器响应成功！！';
    wp_die();//停止内容
}
add_action('wp_ajax_hello_world', 'fun_hello_world');  //管理员调用 
add_action('wp_ajax_nopriv_hello_world', 'fun_hello_world');  //登录用户可以调用

其次钩子函数必须是 wp_ajax_* （这个是 admin 用户的权限）和 wp_ajax_nopriv_*（这个是普通用户的权限），最后 fun_hello_world() 函数里必须有一个 echo 和 wp_die() 或 die() 结束。并且 echo 的必须是 string 类型。

在前端需要调用的地方定义一个占位标签，我这边放在留言板的正文内容前。

<div id="ajaxtxtc"></div>

再引入以下 JavaScript 代码可以直接使用 <script> 标签包裹放在任意可以调用的地方。

var data = {action: 'fun_hello_world'};
$.post("<?php echo admin_url('admin-ajax.php');?>", data, function (data) {   
      $("#ajaxtxtc").html(data); //获取内容回调
   });

测试成功，再替换为 AutoFirst（） 函数，现在可以迅速地先显示留言板页面，并且再过几秒户也能正确显示 ajax 返回的结果。

其他

分享一个带参数的示例：

JS请求端：

jQuery("#submit").click(function () {
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,    
       // ajaxurl为内置js变量，值为"/wp-admin/admin-ajax.php"
        data: {
            'action': 'xiangjia',    // ajax action名称
            'param1': parseInt(100 * Math.random()),
            'param2': parseInt(100 * Math.random())
        },
        success: function (data) {
            alert("结果：" + data);
        },
        error: function (data) {
            console.log(data);
        }
    });
});

PHP响应端：

//action中形参$tag需以“wp_ajax_”作为前缀，
//前缀后面为ajax action名（如：“xiangjia”）
add_action('wp_ajax_xiangjia', 'xiangjia');
function xiangjia()
{
    if (!empty($_POST)) {
        $param1 = intval($_POST['param1'], 0);
        $param2 = intval($_POST['param2'], 0);
        echo $param1 . ' + ' . $param2 . ' = ' . ($param1 + $param2);
        exit();
    }
    echo 0;
    exit();
}

这样通过这两个例子基本可以完成需求，站长就一个面向百度编程的伪码农，能搞定着实欣喜。