Wordpress：如何使用Ajax调用来调用插件功能？

小编典典

Wordpress：如何使用Ajax调用来调用插件功能？

ajax

我正在编写一个Wordpress
MU插件，它在每个帖子中都包含一个链接，并且我想在用户单击此链接时使用ajax调用插件功能之一，然后使用该功能的输出动态更新链接文本。。

我陷入了ajax查询。我已经有了这种复杂的，显然有点乱的方法，但是它不是很有效。在插件中包含Ajax功能的“正确”或“ wordpress”方式是什么？

（下面是我当前的黑客代码。单击生成链接时，在wp页面中得到的输出与在浏览器中直接进入sample-ajax.php时得到的输出不同。）

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

mu-plugins / 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-plugins / sample / sample-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-plugins / sample / sample-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

阅读 239

2020-07-26

共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);
          }
        });
    });
});

2020-07-26