wordpress插件开发全攻略(11)—在你的WP插件中使用AJAX

越来越多的插件开始使用AJAX技术。我个人并没有在大多数的插件中看到过AJAX,但是使用AJAX来完成某个任务对你的插件来说可能是必要的。这篇文章将像你展示怎样在你的插件中使用AJAX。

这篇文章将在上一篇文章《在插件中添加js和css》的基础上继续。

 

建立一个新的PHP文件

Devlounge Plugin Series插件已经有了如下的目录结构了:

  • devloung-plugin-series
    • devlounge-plugin-series.php(main plugin file)
    • js
      • devlounge-plugin-series.js.php
    • css
      • devlounge-plugin-series.css
    • php
      • dl-plugin-ajax.php(新php文件)

注意,我的javascript文件的扩展名是php。我会在这篇文章后面解释这个变化的来历。

我已经建立了一个新的文件,并且把它放到了php文件夹中,并且命名为dl-plugin-ajax.php。我已经在这个文件中放了如下的代码:

  1.  <?php
  2.  if (!function_exists(‘add_action’))
  3.  {
  4.      require_once(“../../../../wp-config.php”);
  5.  }
  6.  if (isset($dl_pluginSeries)) {
  7.      $dl_pluginSeries->showComments();
  8.  }
  9.  ?>

这个段代码非常简单,并且仅为做AJAX调用而写。它确保了配置结构存在,从而我们可以调用类对象dl_pluginSeries,引用其他WordPress函数和变量。然而,showComments函数还没有创建,我们下一个议程就是来做这件事。

定义showComments函数

showComments函数将放在我们的DevloungPluginSeries类中:

  1.   function showComments() {
  2.      global $wpdb;
  3.      $devloungecomments = $wpdb->get_row(“SELECT count(comment_approved) comments_count FROM $wpdb->comments where comment_approved = ‘1’ group by comment_approved”, ARRAY_A);
  4.      echo “You have ” . $devloungecomments[‘comments_count’] . ” comments on your blog”;
  5.  }
  6.  ?>

可能已经认出来了,这段代码在数据库交互这篇文章中出现过。此函数输出你博客上留言的数量。

让JavaScript知道你的博客在哪里

使用AJAX时,一个烦人的事情就是外部JavaScript文件不知道你博客安装路径是什么。我是通过在js后面添加php扩展名来处理这个问题的,因为这样,我就可以调用WordPress函数了。在addHeaderCode函数中,我把代码从:

  1.   if (function_exists(‘wp_enqueue_script’)) {
  2.      wp_enqueue_script(‘devlounge_plugin_series’, get_bloginfo(‘wpurl’) . ‘/wp-content/plugins/devlounge-plugin-series/js/devlounge-plugin-series.js’, array(‘prototype’), ‘0.1’);
  3.  }
  4.  ?>

换成:

  1.   if (function_exists(‘wp_enqueue_script’)) {
  2.      wp_enqueue_script(‘devlounge_plugin_seriess’, get_bloginfo(‘wpurl’) . ‘/wp-content/plugins/devlounge-plugin-series/js/devlounge-plugin-series.js.php’, array(‘prototype’), ‘0.3’);
  3.  }
  4.  ?>

我唯一改变的是一个版本号码,还有就是给JavaScript文件添加了一个php扩展名。

编写JavaScript

这段脚本的目的是找到博客的URL,调用PHP文件,然后返回结果给用户。

  1.  <?php
  2.  if (!function_exists(‘add_action’))
  3.  {
  4.      require_once(“../../../../wp-config.php”);
  5.  }
  6.  ?>
  7.  Event.observe(window, ‘load’, devloungePluginSeriesInit, false);
  8.  function devloungePluginSeriesInit() {
  9.      $(‘devlounge-link’).onclick = devloungePluginSeriesClick;
  10.  }
  11.  function devloungePluginSeriesClick(evt) {
  12.      var url =  “<?php bloginfo(‘wpurl’) ?>/wp-content/plugins/devlounge-plugin-series/php/dl-plugin-ajax.php”;
  13.      var success = function(t){devloungePluginSeriesClickComplete(t);}
  14.      var myAjax = new Ajax.Request(url, {method:’post’, onSuccess:success});
  15.      return false;
  16.  }
  17.  function devloungePluginSeriesClickComplete(t) {
  18.      alert(t.responseText);
  19.  }

上述代码做了下面这些事情(记住,我们在使用Prototype):

  • 确定配置结构是存在的,这样我们才能访问WordPress函数
  • 在文档已经装载后,devloungePluginSeriesInit函数被调用了
  • 给你添加到文章末尾的链接上绑定了一个事件。如果你忘了,现在可以加进去。简单地找到文章,然后添加这段代码:<a href=”#” id=”devlounge-link”>Get the Number of Blog Comments</a>
  • 找到PHP文件的绝对路径
  • 调用PHP文件
  • 将反馈输出给用户

结果

下一步,我们假设你已经把那个链接添加好了。我们点击链接“Get the Number of Blog Comments”,脚本使用AJAX调用了DevlongePluginSeries类中的函数,并且以对话框的形式返回了结果。

就如你看到的那样,我的本地安装版本,并没有多少评论。

本文固定链接: http://www.ccsbbs.com.cn/archives/6243.html | 极限手指

该日志由 极限手指 于2013年03月26日发表在 PHP 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: wordpress插件开发全攻略(11)—在你的WP插件中使用AJAX | 极限手指
关键字: ,

wordpress插件开发全攻略(11)—在你的WP插件中使用AJAX:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!