使用 admin-ajax.php 的 AJAX 请求

Question

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

我尝试合并来自the documentation 和this tutorial 的信息。

但是，在测试该方法时出了点问题……没有调用 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 

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

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 动作挂钩在 Output Buffer 中工作，我会感到非常惊讶。
AFAIK，我们应该只使用 PHP ob_* 函数作为最后的手段。

这是一个标准实现。一个 JavaScript 文件将在短代码回调函数中排队，在其中我们触发一个 document.ready Ajax 调用。 admin-ajax.php URL 使用 wp_localize_script 传递给 JS 对象。查看代码 cmets 了解更多信息，the Codex 了解每个 WP 功能的详细信息：

<?php
/**
 * Plugin Name: (SO) Simple Ajax Shortcode
 * Description: Fire an Ajax action when rendering a shortcode
 * Author:      brasofilo
 * Plugin URL:  https://stackoverflow.com/a/22585520/1287812
 */

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

_{这是一个similar answer of mine，使用 OOP 和 jQuery 命令来触发动作。还有一个article of interest。}