JavaScript 是很多 WordPress插件中重要的一部分，Wordpress 内置了一些常用的 JavaScript 库，来帮助我们减少工作量，其中最常用的就是 jQuery，我们可以使用 jQuery 在 WordPress插件中处理 DOM 对象、执行 Ajax 操作等。

jQuery

使用 jQuery

WordPress 页面加载完成后，jQuery 将在用户的浏览器中运行，一个基本的 jQuery 语句包含两部分，一个选择器，用于确定代码将应用于哪些 HTML 元素，一个操作或事件，用于确定执行代码的操作和对操作的反应，jQuery 基本语句如下：

jQuery.(selector).event(function);

当在选择器选择的 HTML 元素上发生一个事件（如鼠标点击）时，最后一组括号里面定义的回调功能会被执行。

下面的示例代码是一个 HTML 页面的部分源代码，假设这是一个由 myplugin_settings.php 文件定义的 WordPress 后台页面，该页面中包含一个表单，每个标题旁边都有一个单选按钮。

<form id=radioform>
 <table>
  <tbody>
    <td><input class=pref checked=checked name=book type=radio value=Sycamore Row />Sycamore Row</td>
    <td>John Grisham</td>
    <td><input class=pref name=book type=radio value=Dark Witch />Dark Witch</td>
    <td>Nora Roberts</td>
  </tbody>
 </table>
</form>

在页面上，上面代码的输出看起来应该像下图这样。

在介绍 Ajax 的文章中，我们将构建一个 Ajax 请求，将用户选择的选项保存在 user_meta 中，并添加包含所选标签的文章数量。这个示例没什么实际意义，却可以说明执行 Ajax 操作的重要步骤，jQuery 代码可以包含在外部文件中，也可以直接写到页面里面的 <script> 代码块中。下面示例中，我们将代码放到了外部文件中，如果放到 PHP 页面中，传递来自 PHP 的变量时很容易出错。如果你更喜欢直接放到页面里，效果是一样的。

选择器和事件

jQuery 选择器和 CSS 选择器类似，包含 .class 或 #id 或其他 jQuery 选择器 ，但是我们最常使用的还是这两个，在我们的示例中，我们将使用 .pref 类选择器。jQuery 事件也很多，我们使用最多的是 “click”，在我们的示例中，我们会使用 “change” 事件来捕获用户点击单选按钮的动作。请注意，jQuery 事件的命名规则通常和 JavaScript 不同，到目前为止，在示例中，我们添加了一个空的匿名函数。

$.(.pref).change(function(){
   /*do stuff*/
});

任何一个 “pref” 类改变时，此代码将 “执行一些操作”。

Ajax

什么是 Ajax？

Ajax 是 Asynchronous JavaScript And XML 的缩写。XML 是一种数据交换格式，Ajax 是一种互联网通信技术，可以让用户在一个页面上请求服务器的特定信息，然后不用刷新整个页面，就可以更新页面上的一些信息。可以想象一下，Ajax 都可以在哪些地方提升用户体验。

XML 是一种比较传统数据交换格式，实际上，通过 Ajax 交换的可以是任何格式的数据。在使用 PHP 开发页面时，许多开发人员更喜欢 JSON，因为 JSON 是一个简单方便的数据格式，PHP 和 JSON 之间的相互转换也非常简单。

如果想亲身体验一下 Ajax，我们可以打开一个 WordPress 分类管理页面，添加分类时，新添加的分类马上出现在了右侧分类列表中，而整个过程中，页面没有刷新。Ajax 甚至不需要用户操作就可以工作，我们编辑 WordPress 文章或页面时，不用点击保存按钮，每隔几分钟，页面就会自动保存。

为什么使用 Ajax？

显然，Ajax 改善了用户体验，Ajax 帮助我们为用户提供一个及时响应动态页面给用户，而不是展现一个无聊的静态页面。用户在页面上执行了一些操作的时候，他们可以及时得到反馈，操作的结果是什么，操作正确与否。一些重要的表单字段可以在用户输入的时候就被验证，或者根据用户的输入提供一些建议，用户填写表单的时候，无需提交整个表单即可知道每个字段是否输入正确。

Ajax 可以明显减少数据的传输量，只有必须的数据会被传输，而不用重新加载整个页面，传输页面上的所有内容。

特别是在 开发WordPress插件 时，Ajax 是与内容交互比较好的一种方式。如果我们之前编写过 PHP，我们可能需要把内容提交到一个外部 PHP 页面，通过外部页面进行内容的交互。这样做的问题是，我们不能通过这个外部 PHP 页面访问 WordPress 的功能，如果真的要这样做，可以在外部 PHP 中包含 WordPress 的核心引导文件 wp-load.php 来访问 WordPress 的核心功能，

WordPress 的架构现在已经非常灵活，允许我们把 wp-content 目录移动到其他位置，这样的话，我们可能就不知道 wp-load.php 的准确路径了。与此不同的是，而我们可以知道发送 Ajax 请求的准确位置，因为他已经被定义到了全局 JavaScript 变量中。而我们通过 PHP 开发 Ajax 处理程序其实就是把处理函数挂载到了一个是 Action 钩子上，因此，与外部 PHP 文件不同，通过 Ajax 处理程序，我们可以使用 WordPress 的所有功能。

怎么使用 Ajax？

如果我们是一个 WordPress 新手，但有在其他环境中使用 Ajax 的经验，我们需要重新学习一些新东西。WordPress 实现 Ajax 的方式可能与我们习惯的不同，如果我们刚刚接触 Ajax 开发，就不会有这个问题了。我们会在这里学习基础知识，一旦我们开发了一个基本的 Ajax 处理程序，在这个基础上进行扩展并且用一个优秀的界面来开发一个杀手级的应用便是一间非常简单的事情了。

WordPress 中，任何 Ajax 处理程序都有两个主要组件，客户端 JavaScript 和服务器端的 PHP 处理程序，所有 Ajax 处理程序遵循以下两个步骤。

1. 某个页面事件启动了 JavaScript 函数，该函数从页面中收集一些数据，通过 HTTP 请求发送到服务器。直接使用 JavaScript 代码来处理 HTTP 请求比较麻烦，所以 WordPress 捆绑了 jQuery 库，我们可以直接使用 jQuery 提供的 Ajax 方法来实现 HTTP 请求。当然，如果我们是一个 JavaScript 高手，直接使用原生 JavaScript 代码发送 HTTP 请求也是可以的。
2. 服务器收到请求后，会对数据进行一些处理，然后把处理结果以 HTTP 响应的形式发送给客户端浏览器。也不一定非要返回结果，但是为了让用户知道处理的结果，返回结果是比较常见的做法。
3. 发送 Ajax 请求的 jQuery 函数接收到服务器的响应后，会执行一些操作，比如更新页面上的内容或者以其他方式向用户提供通知消息。

通过 jQuery 使用 Ajax

现在，我们将开发前面代码中的 “do_stuff” 函数，我们将使用 $.post 方法来发送数据，该方法有三个参数：发送 POST 请求的 URL，需要发送的数据，以及处理服务器端返回数据的回调函数名称。在这之前，有一些事情需要提前处理一下，我们定义一个如下变量，这样会使下面的回调部分更加方便理解。

var this2 = this;

URL

所有 WordPress Ajax 请求都必须发送到 wp-admin/admin-ajax.php 中，正确、完整的 URL 需要 PHP 输出一个值，jQuery 没办法自己确定这个值，所以，我们不能在 jQuery 中写死这个值，也不会希望其他人通过插件发送 Ajax 请求到你自己的网站上，如果发送 Ajax 请求的页面是后台页面，WordPress 已经通过 JavaScript 全局变量帮助我们设置了正确的 ajaxurl。如果页面来自前端，我们则需要使用 wp_localize_script() 自己设置 ajaxurl 全局变量的值，具体方法会在 PHP 部分详细介绍，现在我们只需要知道，正确的 Ajax URL 是一个 Javascript 全局变量，我们可以通过 PHP 定义并输入这个全局变量。在 jQuery 中，我们是这样使用这个变量的。

my_ajax_obj.ajax_url

数据

所有需要发送到服务器的数据都包含在一个 JavaScript 数组中，此外，我们还需要发送一个 action 参数，来帮助服务端 PHP 判断使用挂载到哪个 Ajax 钩子上的 Action 来处理这些数据。对于可能导致数据库更改的请求，我们还需要发送一个随机数，以便服务器验证请求的来源是合法的，传递给 $.post() 方法的数据示例如下。

{
  _ajax_nonce: my_ajax_obj.nonce, //nonce
  action: my_tag_count,        //action
  title: this.value              //data
}

下面我们来看一下这些数据。

Nonce 随机数

Nonce 是 “Number used ONCE” 的缩写。他本质上是一个唯一的十六进制序列号，可以分配给任何形式的实例，Nonce 使用 PHP 建立，并作为全局对象的一个属性，和 Ajax URL 以相同的方式传递给 jQuery，所以，我们在 Ajax 中使用 Nonce 的方法为 my_ajax_obj.nonce。

Action

所有 WordPress Ajax 请求都必须在数据中包含一个 action 参数，这个值可以是任意字符串，需要和 PHP 后端用于挂载 Ajax 处理程序的钩子名称一样，该值的名称建议是对 Ajax 操作目的的简单描述，在这里，我们使用 “my_tag_count” 作为 action 的值。

action: my_tag_count

其他数据

除了上面两个特殊数据，服务器需要完成此 Ajax 操作的的其他数据也包含在这个 JavaScript 数组中，如果我们需要传输很多字段，可以使用 XML 或 JSON 格式把这些字段合并程一个，在 WordPress 中，我们用的比较多的是 JSON 格式。

在我们的例子中，服务器只需要一个值，一个字符串为选择的名称，我们将使用 “title” 作为该值的名称，在 jQuery 中，触发事件的对象总是包含在变量 this 中，因此，所选元素的值是 this.value。我们对这个值的声明如下。

title: this.value

回调

回调处理程序是在请求发出后，接收服务器响应参数并进行处理的函数，回调函数通常为匿名函数，接收的响应值可以是 yes 或 no 或者较大的 JSON 或 XML 数据。在我们的例子中，我们使用服务端返回的数据替换单选按钮后面的文字。下面是我们的回调函数。

function(data) {
   this2.nextSibling.remove();
   $(this2).after(data);
}

data 包含了服务端的返回数据，在上面，我们为 this2 分配了触发 change 事件的对象，这是因为 this 只能在匿名函数之外只用，在匿名函数中，this 就失效了，所以我们要使用 this2 来代替 this 使用。

服务器响应可以是任何格式的数据，如果服务器响应的数据量比较大，建议使用 XML 或 JSON 这两种数据格式中的一种。

XML

XML 是开发 AJAX 时，较经典数据交换格式。毕竟 AJAX 中的 “X” 就是指 XML。然而使用 PHP 处理 XML 比较麻烦，所以，很多 PHP 程序员更喜欢 JSON 交换格式。

JSON

JSON 比较轻量和易用，所以受到了广大程序员的欢迎。我们可以使用 eval() 来解析 JSON ，但是不要那样做！使用 eval()会 带来重大的安全风险。建议使用专用的 JSON 解析器。使用解析器时，首先要确保我们在页面中引入了这个解析器。有关在页面中引入 JavaScript 库的更多信息将在后面的 PHP部分中介绍 。

其他

只要数据格式可以在 JavaScript 和 PHP 中协调使用，我们都可以使用这种数据格式。

小结

现在，我们已经将匿名回调函数添加为 $.post 方法的最终参数，我们已经完成了示例 jQuery Ajax 脚本，所有部分放在一起，看起来影响像下面这样。

jQuery(document).ready(function($) {           //wrapper
   $(.pref).change(function() {             //event
      var this2 = this;                      //use in callback
      $.post(my_ajax_obj.ajax_url, {         //POST request
           _ajax_nonce: my_ajax_obj.nonce,     //nonce
            action: my_tag_count,            //action
            title: this.value                  //data
        }, function(data) {                    //callback
         this2.nextSibling.remove();        //remove current title
         $(this2).after(data);              //insert server response
});

上面的脚本可以输出到网页上的任何部分，或者放到外部 js 文件中，我们可以把 js 文件放到任何地方，只要能通过 url 访问即可，大多数插件开发人员喜欢把 js 文件放在插件主目录的 /js/ 子目录中，除非你有理由不这样做，否则遵循惯例是一个好选择，在这个例子中，我们把我们的 js 文件命名为 myjquery.js

服务器端 PHP 和 注入前端文件

为了在服务端处理 Ajax 请求，我们需要在 PHP 中做两个工作，一个是把 jQuery 到前端，并把转换  PHP 变量为 JS 数据的全局 JavaScript 变量加入页面中。另一个就编写处理 Ajax 请求的函数。

注入 JavaScript 脚本

本节将介绍 WordPress 中 Ajax 的两个特性，他们可能会让经验丰富的开发者感到困惑，一个是注入脚本，以 meta 链接的形式显示在页面的 <head> 部分，另一个是所有的 Ajax 请求都发送到 wp-admin/admin-ajax.php 中，千万不要把请求直接发送到插件页面。

注入

在 WordPress 中，我们使用 wp_enqueue_script() 函数在页面的 head 中插入一个 meta js 链接，不要在 head 中写死这些链接，开发插件的时候，我们一般不需要修改主题的 head 部分，但是还是要提一下这个规则。

wp_enqueue_script() 函数接受 3 个参数，第一个是在其他函数中引用此 JS 的名称。第二个是 JS 的 URL，我们可以使用 plugins_url() 函数构建正确的 URL，如果我们需要注入插件之外的 JS，请确保我们的 URL 是正确的。第三个参数是 JS 所依赖的其他 JS 的名称数组。由于我们使用 jQuery 发送 Ajax 请求，因此，请至少在数组中列出 ‘jquery’，即便只有一个依赖，也要写成数组的形式。示例如下：

wp_enqueue_script( 'ajax-script',
   plugins_url( '/js/myjquery.js', __FILE__ ),
   array('jquery')
);

WordPress 加载时，我们必须从几个 Action 钩子中把脚本注入页面，使用哪一个取决于脚本需要注入的页面，对于后台页面，使用 admin_enqueue_scripts 钩子，前端页面，使用 wp_enqueue_scripts， 登录页面使用 login_enqueue_scripts 钩子。

admin_enqueue_scripts 钩子把当前页面的文件名传递给了我们的回调，我们可以使用此信息只在需要的页面上注入我们的 JS。wp_enqueue_scripts 钩子没有传递任何变量给我们的回调函数，不过我们可以使用模版判断函数来确保只在需要的地方注入我们的 JS，示例如下。

add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue( $hook ) {
   if( 'myplugin_settings.php' != $hook ) return;
   wp_enqueue_script( 'ajax-script',
      plugins_url( '/js/myjquery.js', __FILE__ ),
      array( 'jquery' )
}

注册 VS 注入

我们可能在其他教程中看到了 wp_register_script() 的使用方法，这是一种不错的处理方法，注册之后，我们还需要使用 wp_enqueue_scripts 函数把脚本注入前端。为什么要多此一举呢？因为注册脚本可以提供一个脚本名称，让我们在其他地方注入这个脚本，WordPress 捆绑的 jQuery 就是在 WordPress 内核中事先注册好的脚本，我们直接使用 「jQuery」 这个名称就可以引入这个脚本了，我们自己注册的脚本也一样。当然，如果我们只需要在自己的插件中引入脚本文件，注册脚本这一步是完全可以省略的。

Nonce 随机数

我们需要创建一个随机数，这样就可以验证 jQuery Ajax 发送的请求是非合法了，只有 PHP 和 jQuery 脚本可以获取这个随机数，收到请求后，我们可以验证这个随机数和我们创建的值是否一样，我们使用下面的示例创建了一个随机数。

$title_nonce = wp_create_nonce( 'title_example' );

参数 title_example 可以是任何字符串，建议遵循语义化原则，通过这个字符串可以看出来这个随机数是用来做什么的。

转换 PHP 变量为 JavaScript 全局变量

我们回想一下前面 jQuery 的部分，由 PHP 创建的供 jQuery 使用的数据被传入名称为 my_ajax_obj 的全局对象中。在我们的例子中，这个数据是一个随机数和 admin-ajax.php 的完整 URL。分配对象属性和创建全局 JavaScript 对象的过程，我们称之为本地化，下面是我们使用 wp_localize_script() 本地化代码的示例代码。

wp_localize_script( 'ajax-script', 'my_ajax_obj', array(
   'ajax_url' => admin_url( 'admin-ajax.php' ),
   'nonce'    => $title_nonce, // It is common practice to comma after
) );

请注意，我们的代码是如何处理 ajax-script 的，该对象对于我们的脚本来说是全局的，而不是对所有脚本。本地化也可以中注入脚本的同一个钩子中调用。创建随机数也是一样的，尽管这个特定的函数几个可以在任何地方调用。在一个钩子中完成所有处理的代码如下：

add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue( $hook ) {
   if( 'myplugin_settings.php' != $hook ) return;
   wp_enqueue_script( 'ajax-script',
      plugins_url( '/js/myjquery.js', __FILE__ ),
      array( 'jquery' )
   $title_nonce = wp_create_nonce( 'title_example' );
   wp_localize_script( 'ajax-script', 'my_ajax_obj', array(
      'ajax_url' => admin_url( 'admin-ajax.php' ),
      'nonce'    => $title_nonce,
}

Ajax 动作

服务端 PHP 代码的另一个主要组成部分是处理 Ajax 提交数据的程序，该处理函数接收 POST 数据，执行某些操作，然后将处理的结果返回给浏览器。函数挂载到哪个钩子上决定了 Ajax 请求处理函数是否要求用户登录，使用哪个程序处理 Ajax 请求取决于 jQuery 脚本的 action 参数传递了什么值。

因为我们的 Ajax 交互是在插件的设置页面使用的，所以必须要求用户登录才可以发送 Ajax 请求，回忆一下前面的 jQuery 部分，Ajax 的值action 为 “my_tag_action”，那么我们后端处理 Ajax 请求的钩子标签将是 wp_ajax_my_tag_count。如果我们的 Ajax 交互可以允许未登录的用户使用，这个钩子标签就是 wp_ajax_nopriv_my_tag_count，示例如下。

add_action( 'wp_ajax_my_tag_count', 'my_ajax_handler' );
function my_ajax_handler() {
   // Handle the ajax request
   wp_die(); // All ajax handlers die when finished
}

我们的 Ajax 处理程序需要做的第一件事就是使用 check_ajax_referer() 函数验证 Ajax 请求发送的随机数，就是我们上面创建的随机数的值。

check_ajax_referer( 'title_example' );

上面函数的参数必须于前面 wp_create_nonce 的参数相同，如果 Nonce 不一致，该处理函数就会自动结束，如果这是一个真正的随机数，这里的验证就通不过了。我们可以创建一个新的随机数并且发送给回调脚本，以便回调脚本在下一个请求中使用，但是由于随机数的有效期是 24 小时，所以，我们不需要这用做了，只要执行检查操作就好了。

数据

随机数验证之后，下一步，我们就需要处理 jQuery 发送过来的 $_POST[‘title’] 数据了，我们可以使用 update_user_meta() 函数保存为用户的元数据。

update_user_meta( get_current_user_id(), 'title_preference', $_POST['title']);

然后，我们创建一个查询，获取标签为所选标题的文章数。

$args = array(
   'tag' => $_POST['title'],
$the_query = new WP_Query( $args );

太棒了，我们终于可以将响应发回给 jQuery 脚本了，我们有几种方法传输数据，我们先来看一下这几种格式。

XML

PHP 对 XML 格式的支持不够好，幸运的是，WordPress 提供了 WP_Ajax_Response 类来让我们的工作更轻松一点， WP_Ajax_Response 会生成一个 XML 格式的响应，为头部设置正确的内容类型，输出 XML，然后结束，确保正确的 XML 响应。

JSON

这种格式轻量且易用，WordPress 提供了 wp_send_json 函数来帮我们把数据转换成 JSON，发送给客户端，然后结束。该函数有效的取代了 WP_Ajax_response。此外，WordPress还提供了 wp_send_json_success 和 wp_send_json_error 函数，允许我们在 JS 中触发适当的 done() 和 fail() 回调。

其他

只要能被客户端 jQuery 处理，我们还可返回其他任何格式的数据，比如以逗号分隔的数据，或一段 HTML 字符串。

echo $_POST['title'].' ('.$the_query->post_count.') ';

在真实的应用程序中，我们必须考虑由于某种原因引起失败操作的可能性，服务端响应应该考虑到这个意外，并且 jQuery 也要能够正确的处理这种意外，并在需要的时候提示用户。

结束

当处理程序处理完所有任务的时候，我们需要结束掉这个程序，如果我们使用 WP_Ajax_Response 或 wp_send_json 函数发送响应，程序会被自动结果，如果不是，我们需要使用 wp_die() 函数手动结束。

Ajax 处理程序总结

一个完整的 Ajax 处理程序看起来应该像下面这样。

//JSON
function my_ajax_handler() {
   check_ajax_referer( 'title_example' );
   update_user_meta( get_current_user_id(), 'title_preference', $_POST['title'] );
   $args = array(
      'tag' => $_POST['title'],
   $the_query = new WP_Query( $args );
   wp_send_json( $_POST['title'] . ' (' . $the_query->post_count . ') ' );
}

//Other
function my_ajax_handler() {
   check_ajax_referer( 'title_example' );
   update_user_meta( get_current_user_id(), 'title_preference', $_POST['title'] );
   $args = array(
      'tag' => $_POST['title'],
   $the_query = new WP_Query( $args );
   echo $_POST['title'].' ('.$the_query->post_count.') ';
   wp_die(); // All ajax handlers should die when finished
}

心跳 API

心跳 API 是一个内置于 WordPress 的服务器轮询 API，让我们可以近乎实时的更新前端。

心跳 API 是怎么工作的

当页面加载时，客户端心跳代码设置了一个时间间隔（称为“打勾”），每隔 15-60 秒运行一次。运行时，心跳 API 收集数据并通过 jQuery 事件发送到服务器，然后等待服务器响应。在服务端，ajax-admin 处理程序获取 jQuery 传递的值数据，处理后以 JSON 格式返回，客户端接收到处理程序返回的数据后，触发一个 jQuery 事件来表明数据已经被接收。

自定义心跳事件的基本过程是：

1. 给需要发送的数据添加额外的字段（JS heartbeat-send 事件 ）
2. 在 PHP 中检测发送的字段，并添加额外的响应字段（ heartbeat_received filter 钩子）
3. 在 JS（JS heartbeat-tick ）中处理返回数据。

我们可以选择性的使用其中一个或两个事件，具体取决于我们需要的功能。

使用心跳 API

使用心跳 API 需要两个独立的功能：在 JavaScript 中发送和接收回调，以及在 PHP 中处理传递数据的服务端 Filter 钩子。

发送数据到服务器

当心跳向服务器发送数据时，可以包含任意格式的自定义数据，或表示我们需要数据的布尔值。

jQuery( document ).on( 'heartbeat-send', function ( event, data ) {
    // 添加附加数据到心跳数据
    data.myplugin_customfield = 'some_data';
});

在服务器上获取数据并返回响应

在服务器端，我们可以获取这些数据，并把其他数据添加到响应中。

// 添加 Filter 到接收钩子
add_filter( 'heartbeat_received', 'myplugin_receive_heartbeat', 10, 2 );
 * 获取心跳数据然后返回响应
 * @param array $response Heartbeat response data to pass back to front end.
 * @param array $data Data received from the front end (unslashed).
function myplugin_receive_heartbeat( $response, $data ) {
    // 如果没有接收到数据，直接返回原始响应
    if ( empty( $data['myplugin_customfield'] ) ) {
        return $response;
    // 处理数据并附加到响应
    $received_data = $data['myplugin_customfield'];
    $response['myplugin_customfield_hashed'] = sha1( $received_data );
    return $response;
}

处理服务器响应

回到前端，我们可以接收并处理服务器返回的响应数据。

jQuery( document ).on( 'heartbeat-tick', function ( event, data ) {
    // Check for our data, and use it.
    if ( ! data.myplugin_customfield_hashed ) {
        return;
    c-alert( 'The hash is ' + data.myplugin_customfield_hashed );
});

并不是每个功能都需要这三个步骤，例如，如果我们不需要将任何数据发送到服务器，则只需要使用后面两个步骤就可以了。

总结

这里是我们前面讨论的所有示例代码片段的总结，一个用于 jQuery，一个用于 PHP。

php

下面代码应该位于插件的某个 PHP 文件中。

<?php add_action('admin_enqueue_scripts', 'my_enqueue');
function my_enqueue($hook) {
   if( 'myplugin_settings.php' != $hook) return;
   wp_enqueue_script( 'ajax-script',
      plugins_url( '/js/myjquery.js', __FILE__ ),
      array('jquery')
   $title_nonce = wp_create_nonce('title_example');
   wp_localize_script('ajax-script', 'my_ajax_obj', array(
      'ajax_url' => admin_url( 'admin-ajax.php' ),
      'nonce'    => $title_nonce,
add_action('wp_ajax_my_tag_count', 'my_ajax_handler');
function my_ajax_handler() {
   check_ajax_referer('title_example');
   update_user_meta( get_current_user_id(), 'title_preference', $_POST['title']);
   $args = array(
      'tag' => $_POST['title'],
   $the_query = new WP_Query( $args );
   echo $_POST['title'].' ('.$the_query->post_count.') ';
   wp_die(); // all ajax handlers should die when finished
}

jQuery

下面的代码位于插件文件夹下的文件 js/myjquery.js 中。

jQuery(document).ready(function($) {       //wrapper
    $(.pref).change(function() {         //event
        var this2 = this;                  //use in callback
        $.post(my_ajax_obj.ajax_url, {     //POST request
            _ajax_nonce: my_ajax_obj.nonce, //nonce
            action: my_tag_count,        //action
            title: this.value              //data