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

Posted 2023-02-24

【中文标题】Wordpress：如何使用 ajax 调用来调用插件函数？

【英文标题】：Wordpress: how to call a plugin function with an ajax call?

【发布时间】：2011-02-23 22:16:45

【问题描述】：

我正在编写一个 Wordpress MU 插件，它包含每个帖子的链接，我想在用户单击此链接时使用 ajax 调用插件函数之一，然后使用输出动态更新链接文本从那个函数。

我被 ajax 查询卡住了。我有这种复杂的，显然是hack-ish的方法，但它并不完全有效。在插件中包含 ajax 功能的“正确”或“wordpress”方式是什么？

（我当前的 hack 代码如下。当我单击生成链接时，我在 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

【参考方案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 已经使用了一些动作名称，因此请确保您查看文件并且不要使用相同的动作名称，否则您会不小心尝试执行删除 cmets 等操作。

编辑

抱歉，我不太明白这个问题。我以为你在问如何做一个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);
          
        );
    );
);

【讨论】：

我忘了添加 admin-ajax.php 负责加载整个 WordPress 环境，因此您无需担心在插件中包含任何文件。

您的原始答案很棒。感谢您向我展示了在 wp 中执行 ajax 的正确方法。您的解释清楚地说明了我在我读过的其他代码中看到的内容。注意：我在上面的问题中也有一个 javascript 范围错误，因此它可能是一个比“修复我的特定愚蠢错误”问题更有用的 wp 参考问题。 （在 ajax 调用的成功 fn 中引用了“this”）。

John P 完全正确，我很抱歉，我的解决方案不是唯一的方法，但这是我发现快速 AJAX 的一种方法，无需自己加载 WordPress .

忘了在 John P 的方法中提到您可以使用 JavaScript 变量 ajaxurl 而不是硬编码 URL（或 WP 3.0 中的属性 userSettings.ajaxurl）。

我应该把jQuery函数放在哪里？，在哪个文件中？

【参考方案2】：

WordPress 环境

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

请查看：

wp_register_script();函数 wp_enqueue_scripts钩子 wp_enqueue_script();函数 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 调用触发的函数。 记住后缀：

wp_ajax（只允许注册用户或管理面板操作该功能） 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

希望对你有帮助！

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

【讨论】：

add_action('wp_ajax_nopriv_myaction', 'so_wp_ajax_function');

解释得很好。我正在制作我的第一个插件，这很酷！！！

【参考方案3】：

只是添加一个信息。 如果你想从一个 php 类方法函数中接收一个对象：

js 文件

jQuery(document).ready(function()
jQuery(".foobar").bind("click", function() 
    var data = 
        'action': 'getAllOptionsByAjax',
        'arg1': 'val1',
        'arg2': $(this).val() 
    ;
    jQuery.post( ajaxurl, data, function(response) 
       var jsonObj = JSON.parse( response );
    );
);

php 文件

public static function getAllOptionsByAjax()

    global $wpdb;

    // Start query string
    $query_string  =  "SELECT * FROM wp_your_table WHERE col1='" . $_POST['arg1'] . "' AND col2 = '" . $_POST['arg2'] . "' ";

    // Return results
    $a_options = $wpdb->get_results( $query_string, ARRAY_A );
    $f_options = array();
    $f_options[null] =  __( 'Please select an item', 'my_domain' );
    foreach ($a_options as $option)
        $f_options [$option['id']] = $option['name'];
    
    $json = json_encode( $f_options );
    echo $json;
    wp_die();