Wordpress:如何使用ajax调用调用插件函数？

Question

我正在编写一个Wordpress MU插件,它包含每个帖子的链接,我想在用户点击此链接时使用ajax调用其中一个插件函数,然后使用该函数的输出动态更新链接文本.

我坚持使用ajax查询.我有这种复杂的,明显是黑客的方式,但它不是很有效.在插件中包含ajax功能的'正确'或'wordpress'方式是什么？

(我当前的黑客代码如下.当我点击生成链接时,我没有得到与wp页面相同的输出,就像我在浏览器中直接访问sample-ajax.php一样.)

我的代码[1]设置如下:

MU-插件/ sample.php:

<?php
/*
Plugin Name: Sample Plugin
*/
if (!class_exists("SamplePlugin")) {
  class SamplePlugin {
    function SamplePlugin() {}
    function addHeaderCode() {
      echo '<link type="text/css" rel="stylesheet" href="'.get_bloginfo('wpurl').
             '/wp-content/mu-plugins/sample/sample.css" />\n';
      wp_enqueue_script('sample-ajax', get_bloginfo('wpurl') .
             '/wp-content/mu-plugins/sample/sample-ajax.js.php',
             array('jquery'), '1.0');

    }
    // adds the link to post content.
    function addLink($content = '') {
        $content .= "<span class='foobar clicked'><a href='#'>click</a></span>";
        return $content;
    }
    function doAjax() { //
        echo "<a href='#'>AJAX!</a>";
    } 
  }
}
if (class_exists("SamplePlugin")) {
  $sample_plugin = new SamplePlugin();
}
if (isset($sample_plugin)) {
  add_action('wp_head',array(&$sample_plugin,'addHeaderCode'),1);
  add_filter('the_content', array(&$sample_plugin, 'addLink'));
}

MU-插件/样品/试样ajax.js.php:

<?php
if (!function_exists('add_action')) {
    require_once("../../../wp-config.php");
}
?>
jQuery(document).ready(function(){
    jQuery(".foobar").bind("click", function() {
        var aref = this;
        jQuery(this).toggleClass('clicked');
        jQuery.ajax({
          url: "http://mysite/wp-content/mu-plugins/sample/sample-ajax.php",
          success: function(value) {
            jQuery(aref).html(value);
          }
        });
    });
});

MU-插件/样品/试样ajax.php:

<?php
if (!function_exists('add_action')) {
  require_once("../../../wp-config.php");
}
if (isset($sample_plugin)) {
  $sample_plugin->doAjax();
} else {
  echo "unset";
}
?>

[1]注意:以下教程让我​​走到了这一步,但是我很难过. http://www.devlounge.net/articles/using-ajax-with-your-wordpress-plugin

Answer 1

TheDeadMedic不太对劲.WordPress内置了AJAX功能.使用带参数'action'的POST将您的ajax请求发送到/wp-admin/admin-ajax.php:

jQuery(document).ready(function(){
    jQuery(".foobar").bind("click", function() {
        jQuery(this).toggleClass('clicked');
        jQuery.ajax({
          type:'POST',
          data:{action:'my_unique_action'},
          url: "http://mysite/wp-admin/admin-ajax.php",
          success: function(value) {
            jQuery(this).html(value);
          }
        });
    });
});

然后将它挂在插件中,如果你只想让它对登录的用户起作用:

add_action('wp_ajax_my_unique_action',array($sample_plugin,'doAjax'));

或者像这样挂钩它只适用于未登录的用户:

add_action('wp_ajax_nopriv_my_unique_action',array($sample_plugin,'doAjax'));

如果您希望它适用于每个人,请同时使用它们.

admin-ajax.php已经使用了一些动作名称,因此请确保查看该文件并且不要使用相同的动作名称,否则您将不小心尝试删除注释等操作.

编辑

对不起,我不太明白这个问题.我以为你在问如何做一个ajax请求.无论如何,我要尝试两件事:

首先,让你的函数只回显没有a标记的AJAX这个词.接下来,尝试更改您的ajax调用,以便它既有成功又有完整的回调:

jQuery(document).ready(function(){
    jQuery(".foobar").bind("click", function() {
        var val = '';
        jQuery(this).toggleClass('clicked');
        jQuery.ajax({
          type:'POST',
          data:{action:'my_unique_action'},
          url: "http://mysite/wp-admin/admin-ajax.php",
          success: function(value) {
            val = value;
          },
          complete: function(){
            jQuery(this).html(val);
          }
        });
    });
});

Answer 2

WordPress环境

首先，为了完成这个任务，建议注册然后入队一个jQuery脚本，将请求推送到服务器。这些操作将被钩在wp_enqueue_scripts动作钩子中。在同一个钩子中，您应该wp_localize_script指出它用于包含任意 Javascript。通过这种方式，前端就有一个可用的 JS 对象。该对象携带 jQuery 句柄使用的正确 url。

请看一看：

1. wp_register_script(); 功能
2. wp_enqueue_scripts钩子
3. wp_enqueue_script(); 功能
4. wp_localize_script(); 功能

文件：functions.php 1/2

add_action( 'wp_enqueue_scripts', 'so_enqueue_scripts' );
function so_enqueue_scripts(){
  wp_register_script( 'ajaxHandle', get_template_directory() . 'PATH TO YOUR JS FILE', array(), false, true );
  wp_enqueue_script( 'ajaxHandle' );
  wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

文件：jquery.ajax.js

此文件进行 ajax 调用。

jQuery(document).ready( function($){
  //Some event will trigger the ajax call, you can push whatever data to the server, simply passing it to the "data" object in ajax call
  $.ajax({
    url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function
    type: 'POST',
    data:{
      action: 'myaction', // this is the function in your functions.php that will be triggered
      name: 'John',
      age: '38'
    },
    success: function( data ){
      //Do something with the result from server
      console.log( data );
    }
  });
});

文件：functions.php 2/2

最后，在您的functions.php 文件中，应该有由您的ajax 调用触发的函数。记住后缀：

1. wp_ajax（仅允许注册用户或管理面板操作的功能）
2. wp_ajax_nopriv ( 允许无权限用户的功能)

这些后缀加上动作构成了你的动作的名称：

wp_ajax_myaction 或者 wp_ajax_nopriv_myaction

add_action( 'wp_ajax_myaction', 'so_wp_ajax_function' );
add_action( 'wp_ajax_nopriv_myaction', 'so_wp_ajax_function' );
function so_wp_ajax_function(){
  //DO whatever you want with data posted
  //To send back a response you have to echo the result!
  echo $_POST['name'];
  echo $_POST['age'];
  wp_die(); // ajax call must die to avoid trailing 0 in your response
}

希望能帮助到你！

如果有不清楚的地方，请告诉我。