Question

我正在尝试实现基本的ajax。我一直关注this tutorial。点击按钮后我的JS会触发，但我从ajax网址获取400：POST http://localhost:8080/wp-admin/admin-ajax.php 400 (Bad Request)

据我所知，我并没有偏离教程代码。她是我的JS：

jQuery(document).ready(function($){
    $('#baa_form').submit(function(){

        var data = {
            action: 'baa_response'
        } 

        $.post(ajaxurl, data, function(response){
            alert('Hello');
        });

        return false;
    });
});

PHP：

 <?php
function baa_add_menu() {
    global $baa_settings_page;

    $baa_settings_page = add_menu_page( 'Basic Admin Ajax', 'Basic Admin Ajax', 'edit_pages', 'basic-admin-ajax', 'baa_render_settings_page', false, 62.1 );
}

function baa_load_scripts( $hook ) {
    global $baa_settings_page;
    if ( $hook !== $baa_settings_page ) {
        return;
    }
    $path = plugin_dir_url( __FILE__ ) . 'js/basic-admin-ajax.js';
    wp_enqueue_script( 'basic-admin-ajax', $path, array( 'jquery' ) );
}

add_action( 'admin_menu', 'baa_add_menu' );
add_action( 'admin_enqueue_scripts', 'baa_load_scripts' );

function baa_render_settings_page() {
    ?>
    <form id="baa_form" method="POST">
        <div>
            <input type="submit" name="baa_submit_button" id="baa_submit_button" class="button-primary" value="go ajax">
        </div>
    </form>
    <?php
}

function baa_response() {
    die( 'I got died' );
}

我查看了admin-ajax.php内部，我可以看到返回400的唯一原因是我是否未能设置动作。 data['action']肯定是定的，除非我疯了。

我做的事情显然是错的吗？可能导致400响应的原因是什么？

更新为了澄清，JS会触发，但admin-ajax.php的请求会收到400。您可以看到教程所在的位置实现了类似的JS here。（我还没有添加一个nonce，但视频制作者已经证明它在没有实现nonce的情况下工作了。）

修改我已经更新了PHP以显示插件的整个PHP文件。

更新2 我已经将JS剥离回到基本要素并遵循Wordpress的顶部示例。答案仍为400。这让我相信它可能是我在PHP中忽略的东西。目前，我不明白为什么或它可能是什么。

jQuery(document).ready(function($) {
    var data = {
        'action': 'baa_response'
    };

    $.post(ajaxurl, data, function(response) {
        alert('Got this from the server: ' + response);
    });
});

Answer 1

您错过了action，这将触发您的Ajax请求。 WordPress无法猜测哪个函数与您的Ajax调用有关，这就是阻止它的原因（400 Bad Request）。

在php文件中添加以下行：

add_action('wp_ajax_baa_response', 'baa_response');

您可能还想查看Ajax in Wordpress文档。

Answer 2

请尝试这样，

将此添加到 functions.php ，

$path = plugin_dir_url( __FILE__ ) . 'js/basic-admin-ajax.js';
wp_enqueue_script( 'basic-admin-ajax', $path, array('jquery'), '1.0', true );

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

function baa_response() {
   echo "something.....";
   die();
}

JS 文件中的

jQuery(document).ready(function($){
 $('#baa_form').submit(function(){
    jQuery.ajax({
        url: action_linklist.ajax_url,
        type: 'post',
        data:{'action': 'baa_response'},
        success: function (response) {
            alert(response);
        }
    });
    return false;
 });
});

希望这会对你有所帮助，

有关详细信息，请访问。

Using AJAX with wordpress

AJAX in Plugins

Wordpress：为什么我从ajaxurl获得400？

2 个答案: