javascript - 使用 admin-ajax.php 的 AJAX 请求

Question

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

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

但是，在测试该方法时出现了问题...未调用 AJAX 查询 Hook 。

这就是我的 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=测试)但返回0。

根据PHP调试器调用admin-ajax.php内部的do_action('wp_ajax_test')。

Answer 1

如果您设法使这些 Ajax 操作 Hook 在 Output Buffer 内工作，我会感到非常惊讶。 .
AFAIK，我们应该只使用 PHP ob_* 函数作为最后的手段。

这是一个标准实现。 JavaScript 文件将在短代码回调函数中排队，并在其中触发 document.ready Ajax 调用。 admin-ajax.php URL 使用 wp_localize_script 传递给 JS 对象。检查代码注释以获取更多信息和 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 .}