在WordPress插件中正确使用Ajax

Question

我试图在我的自定义插件中调用 AJAX，但没有成功。所以我尝试编写一个简单的代码来检查 ajax 调用，问题是当我将代码放在 functions.php 中时它工作得很好。但是当我把它放在我的插件中的另一个文件中时。它不起作用。我不知道为什么。这是简单的代码。

// This would normally be enqueued as a file, but for the sake of ease we will just print to the footer
function add_this_script_footer(){ ?>

<script>
jQuery(document).ready(function($) {

    // This is the variable we are passing via AJAX
    var fruit = 'Banana';

    // This does the ajax request (The Call).
    $.ajax({
        url: "<?php echo admin_url('admin-ajax.php'); ?>", // Since WP 2.8 ajaxurl is always defined and points to admin-ajax.php
        data: {
            'action':'example_ajax_request', // This is our PHP function below
            'fruit' : fruit // This is the variable we are sending via AJAX
        },
        success:function(data) {
    // This outputs the result of the ajax request (The Callback)
            
            window.alert(data);
        },
        error: function(errorThrown){
            window.alert(errorThrown);
        }
    });

});
</script>
<?php }

add_action('in_admin_footer', 'add_this_script_footer');

function example_ajax_request() {

    // The $_REQUEST contains all the data sent via AJAX from the Javascript call
    if ( isset($_REQUEST) ) {

        $fruit = $_REQUEST['fruit'];

        // This bit is going to process our fruit variable into an Apple
        if ( $fruit == 'Banana' ) {
            $fruit = 'Apple';
        }

        // Now let's return the result to the Javascript function (The Callback)
        echo $fruit;
    }

    // Always die in functions echoing AJAX content
   die();
}

// This bit is a special action hook that works with the WordPress AJAX functionality.
add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );

当我把它放在 functions.php 中时，它会很好地提醒 Apple。

但是当我将它放入文件中时，它会提示 [object OBJECT]。

我已经尝试添加

wp_localize_script('mypluginscript', 'ajax_object', array(
            'ajax_url' => admin_url('admin-ajax.php')
        ));

然后更改数据对象中的 url:ajax_object.ajax_url，但仍然没有成功，有时我得到 POST xxxx.com/wp-admin/admin-ajax.php 400 .

Answer 1

看起来你的大部分设置都正确，但是当你将代码移动到插件中的单独文件时，你需要正确地排队脚本并将其本地化以获得正确的ajax URL。这是有关如何执行此操作的分步过程：

1. 在您的插件目录中创建一个新的 JavaScript 文件，我们称之为myplugin-ajax.js。

2. 将 JavaScript 代码从您的 add_this_script_footer() 函数移动到新创建的 myplugin-ajax.js 文件。确保删除 标签，因为在单独的 JS 文件中不需要它们。在url参数中将echo admin_url('admin-ajax.php');替换为ajax_object.ajax_url。

jQuery(document).ready(function($) {

    // This is the variable we are passing via AJAX
    var fruit = 'Banana';

    // This does the ajax request (The Call).
    $.ajax({
        url: ajax_object.ajax_url,
        data: {
            'action': 'example_ajax_request',
            'fruit': fruit
        },
        success: function(data) {
            window.alert(data);
        },
        error: function(errorThrown) {
            window.alert(errorThrown);
        }
    });

});

3. 现在，让我们正确地排队和本地化插件文件中的脚本。将您的 add_this_script_footer() 函数替换为以下函数：

function enqueue_myplugin_ajax_script() {
    // Register the script
    wp_register_script('myplugin-ajax', plugin_dir_url(__FILE__) . 'myplugin-ajax.js', array('jquery'), '1.0.0', true);

    // Localize the script with the correct ajax URL
    wp_localize_script('myplugin-ajax', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));

    // Enqueue the script
    wp_enqueue_script('myplugin-ajax');
}

add_action('admin_enqueue_scripts', 'enqueue_myplugin_ajax_script');

此函数对您的 myplugin-ajax.js 文件进行排队和本地化。确保替换 plugin_dir_url(FILE) 。 'myplugin-ajax.js' 如果它位于子目录中，请使用正确的myplugin-ajax.js 文件路径。

4. 删除 add_action('in_admin_footer', 'add_this_script_footer'); 行，因为您不再需要它。

现在，您的 AJAX 调用应该可以从您的自定义插件文件正常工作。