使用 admin-ajax.php 的 AJAX 请求

Question

我正在尝试在 WordPress 插件中执行 AJAX 请求。该请求是使用自定义短代码在嵌入在文章中的首页上发起的。

我尝试将文档和本教程中的信息结合起来。

但是，在测试该方法时出了点问题……没有调用 AJAX 查询挂钩。

这就是我的page.php脚本被调用以进行短代码交付的方式：

add_shortcode('testshortcode', 'TestShortCodeFunction');

function TestShortCodeFunction($attributes)
{
   ob_start();
   include(__DIR__.'/page.php');
   return ob_get_clean();
}

这是我压缩的测试脚本page.php：

<?php

    add_action('wp_ajax_test', 'Test');
    add_action('wp_ajax_nopriv_test', 'Test');

    // do_action('wp_ajax_nopriv_test'); this calls Test()

    function Test()
    {
        echo 'Hallo';
        die();
    }
?>

<script type='text/javascript'>

    jQuery(document).ready(function() {

        console.log("JS query started");

        // The following does not call test()
        jQuery.ajax({
            type: "POST",
            url: "http://127.0.0.1/wordpress/wp-admin/admin-ajax.php?action=test",
            success: function(data) {
                console.log("Query returned: "+data);
            }
        });

    });

</script>

控制台上的输出是：

JS query started
Query returned: 0 

Test()根据 PHP 调试器永远不会调用该函数。

将admin-ajax.php根据网络监视器（执行URL http://127.0.0.1/wordpress/wp-admin/admin-ajax.php?action=test），但是返回0。

里面admin-ajax.php do_action('wp_ajax_test')是根据PHP调试器调用的。

Answer 1

如果您设法让这些 Ajax 动作挂钩在输出缓冲区内工作，我会感到非常惊讶。
AFAIK，我们应该只使用 PHPob_*函数作为最后的手段。

这是一个标准的实现。一个 JavaScript 文件将排入短代码回调函数中，并在其中触发document.readyAjax 调用。该admin-ajax.phpURL是使用传递给JS对象wp_localize_script。检查更多的信息和代码注释的食品法典委员会为各WP功能的详细信息：

<?php
/**
 * Plugin Name: (SO) Simple Ajax Shortcode
 * Description: Fire an Ajax action when rendering a shortcode
 * Author:      brasofilo
 * Plugin URL:  /sf/answers/1580986431/
 */

add_shortcode( 'testshortcode', 'shortcode_so_22579460' );
add_action( 'wp_enqueue_scripts', 'enqueue_so_22579460' );
add_action( 'wp_ajax_Test_SO', 'Test_SO' );
add_action( 'wp_ajax_nopriv_Test_SO', 'Test_SO' );

/**
 * Enqueue our script inside the shortcode 
 */
function shortcode_so_22579460($attributes)
{
    wp_enqueue_script( 'my-script' );
    return '<h1>Check the broswer console.</h1>';
}

/**
 * Register and localize our script
 */
function enqueue_so_22579460() 
{
    wp_register_script( 
         'my-script',
         plugin_dir_url( __FILE__ ) . 'ajax.js',
         array( 'jquery' ) // enqueue jQuery as dependency
    );

    // We can pass any number of PHP data to the JS 'wp_ajax' object
    // Here, only the basics, Ajax URL and a security check 
    wp_localize_script( 
        'my-script', 
        'wp_ajax',
        array( 
              'ajaxurl'     => admin_url( 'admin-ajax.php' ),
              'ajaxnonce'   => wp_create_nonce( 'ajax_post_validation' ) 
         ) 
    );
}

/**
 * Ajax callback
 */
function Test_SO()
{
    // Security check
    check_ajax_referer( 'ajax_post_validation', 'security' );

    // Demonstrative boolean value to return
    $random = ( rand() % 2 != 0 );

    if( $random )
        wp_send_json_error( array( 'error' => 'Random is ODD' ) );
    else
        wp_send_json_success( 'Random is EVEN' );
}

并且 JavaScript 文件 ( ajax.js) 与插件文件存储在同一文件夹中：

jQuery(document).ready( function($) 
{
    var data = {
        action: 'Test_SO',
        security: wp_ajax.ajaxnonce
    };

    $.post( 
        wp_ajax.ajaxurl, 
        data,                   
        function( response )
        {
            // Errors
            if( !response.success )
            {
                // No data came back, maybe a security error
                if( !response.data )
                    console.log( 'AJAX ERROR: no response' );
                // Error from PHP
                else
                    console.log( 'Response Error: ' + response.data.error );
            }
            // Success
            else
                console.log( 'Response Success: ' + response.data );
        }
    ); 
});

_{这是我使用 OOP 和 jQuery 命令触发操作的类似答案。和一篇感兴趣的文章。}