WordPress主题开发post请求,js查询交互

引言

在使用WordPress时，对于category、tag等分类、文章的查询展示，均是在php文件中指定分类进行WP_query查询，得到结果进行展示。

如果要查询category或tag不固定，而是随着用户页面的交互操作来进行查询展示，就需要用到post请求，主要分两部分：

1. 将post请求发送给根目录下的admin-ajax.php
2. 在主题functions.php中通过钩子函数，处理传来的参数，返回处理结果

在模板文件中配置post请求

• 在对应的php页面模板中，添加如下Script片段：

// javascript
<script>
<?php $admin_url=admin_url( 'admin-ajax.php' ); ?>
$(document).ready(function($){
    var data={
      action:'postQuery',
      data: '要传递的数据'
    }

    $.post("<?php echo $admin_url;?>", data, function(response) {
      if(!response){
        return;
      }else{
        $("#tagRes").html(response); // 在页面id中展示返回的结果
      }
    });
});
</script>

• 注意js中post请求的action：postQuery，为回调钩子函数的postQuery函数名称

functions.php配置

// functions.php
function postQuery(){
  $data = $_POST['data']; // 得到传递参数

  echo $data;
  wp_reset_query();
  die();
}
add_action('wp_ajax_postQuery', 'postQuery');
add_action('wp_ajax_nopriv_postQuery', 'postQuery');

执行效果

通过界面click等交互操作，执行上面方法，在控制台查看：

这样就完成了页面向WordPress的一个post请求。

参考文章：

• 如何在WordPress中使用Ajax
• awhitepixel.com/blog/wordpr…
• query_posts
• WordPress 文章查询用法大全