自定义WordPress插件中Ajax请求报Bad Request错误求助

我开发首个WordPress插件时，创建表单后用$.ajax()提交POST数据出现「Bad Request」错误，尝试多种方法未解决，相关代码如下，求修复方案：

原JS代码 #

jQuery(document).ready(function($) {
    // Verificar si my_ajax_obj está definido
    if (typeof my_ajax_obj !== 'undefined') {
        console.log(my_ajax_obj);
        
        // Capturamos el evento submit del formulario
        $("#dhl_guias_form").on("submit", function(event) {
            event.preventDefault();
            
            // Serializamos los datos del formulario y los convertimos en JSON
            var formData =  $("#dhl_guias_form").serialize()

            console.log(formData);
    
         
            
          
            // Realizamos la solicitud POST utilizando $.ajax
            jQuery.ajax({

                type: "POST",
            
                url: my_ajax_obj.ajax_url,
                
                data: formData,
                action: 'astral_save_form',
                beforesend: function(){
                    alert("hello");
                    console.log("ajax");
                    console.log(my_ajax_obj);
                    console.log(my_ajax_obj.ajax_url);
                },
                nonce: my_ajax_obj.nonce,
                
               
                success: function(response) {
                    // Éxito en la solicitud
                    console.log(response);
                    console.log("OK");
                },
                error: function(xhr, status, error) {
                    // Error en la solicitud
                    console.log(error);
                    console.log("error");
                }
            });
        });
    } else {
        console.log("my_ajax_obj no está definido");
    }
});

原PHP代码 #

<?php
/*
Plugin Name: Astral
Plugin URI: https://www.ejemplo.com
Description: Descripción del plugin.
Version: 1.0
Author: Tu Nombre
Author URI: https://www.tunombre.com
*/

// Activar el plugin
register_activation_hook(__FILE__, 'astral_plugin_activation');

function astral_plugin_activation() {
    // Código para activar el plugin
    global $wpdb;
    $table_name = $wpdb->prefix . 'dhl_guias'; // Nombre de la tabla
    $charset_collate = $wpdb->get_charset_collate();
    $sql = "CREATE TABLE $table_name (
        id INT NOT NULL AUTO_INCREMENT,
        nombre VARCHAR(100) NOT NULL,
        direccion VARCHAR(100) NOT NULL,
        PRIMARY KEY (id)
    ) $charset_collate;";
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}

// Desactivar el plugin
register_deactivation_hook(__FILE__, 'astral_plugin_deactivation');

function astral_plugin_deactivation() {
    // Código para desactivar el plugin
}


function astral_create_menu() {
    add_menu_page(
        'Astral',               // Título de la Página
        'Astral Menu',          // Título del Menú
        'manage_options',       // Capability
        'astral-menu',          // Slug del Menú
        'astral_menu_callback', // Callback para mostrar el contenido del menú
        'dashicons-admin-generic', // Icono
        1                       // Posición del menú en el panel de administración
    );
}

add_action('admin_menu', 'astral_create_menu'); // Crear Menú

function astral_menu_callback() {
    // Código para mostrar el contenido del menú Astral
    include plugin_dir_path(__FILE__) . 'astral_visual.php';
}

add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue( $hook ) {
   if ( 'toplevel_page_astral-menu' !== $hook ) {
      return;
   }

   wp_enqueue_script(
      'ajax-script',
      plugins_url( 'js/astral.js', __FILE__ ),
      array( 'jquery' ),
      
   );

   $title_nonce = wp_create_nonce( 'title_example' );
   wp_localize_script(
      'ajax-script',
      'my_ajax_obj',
      array(
         'ajax_url' => admin_url( 'admin-ajax.php' ),
         'nonce'    =>wp_create_nonce( 'nonce' )
         
      )
   );
}

add_action('wp_ajax_astral_save_form', 'astral_save_form');

function astral_save_form() {
    check_ajax_referer('astral_ajax_nonce', 'nonce'); // Verificar el nonce para mayor seguridad

    global $wpdb;
    $table_name = $wpdb->prefix . 'dhl_guias';

    $field1 = sanitize_text_field($_POST['field1']);
    $field2 = sanitize_text_field($_POST['field2']);

    $wpdb->insert(
        $table_name,
        array(
            'id' => NULL,
            'nombre' => $field1,
            'direccion' => $field2
        )
    );

    wp_die(); // Finaliza la ejecución de la solicitud AJAX
}

原表单代码（astral_visual.php） #

<form id="dhl_guias_form" method="POST">
    <input type="text" name="field1" placeholder="Campo 1" /><br>
    <input type="text" name="field2" placeholder="Campo 2" /><br> 
    <button type="submit" id="save" name="save">GUARDAR</button>
</form>

错误分析与修复步骤 #

• AJAX参数结构错误：action和nonce必须作为data对象的一部分传递，不能放在$.ajax()的顶级配置中
• Nonce验证签名不匹配：PHP端check_ajax_referer()使用的签名是astral_ajax_nonce，但JS端传递的nonce是用nonce签名生成的，两者不一致导致验证失败
• beforeSend拼写错误：配置项应为beforeSend（首字母大写），否则不会触发前置回调
• 表单数据未合并必要参数：serialize()仅序列化表单字段，需手动添加action和nonce到请求数据中
• WPDB插入冗余字段：自增id字段无需手动传递NULL，数据库会自动生成

修改后的完整代码 #

修改后的JS代码 #

jQuery(document).ready(function($) {
    if (typeof my_ajax_obj !== 'undefined') {
        console.log(my_ajax_obj);
        
        $("#dhl_guias_form").on("submit", function(event) {
            event.preventDefault();
            
            // 合并表单数据、action和nonce
            var formData = $("#dhl_guias_form").serialize() + 
                '&action=astral_save_form' + 
                '&nonce=' + my_ajax_obj.nonce;

            console.log(formData);
    
            jQuery.ajax({
                type: "POST",
                url: my_ajax_obj.ajax_url,
                data: formData,
                beforeSend: function(){ // 修复拼写错误
                    console.log("AJAX请求即将发送");
                    console.log(my_ajax_obj.ajax_url);
                },
                success: function(response) {
                    console.log(response);
                    console.log("请求成功");
                },
                error: function(xhr, status, error) {
                    console.log(error);
                    console.log("请求失败");
                    // 查看响应详情辅助排查
                    console.log(xhr.responseText);
                }
            });
        });
    } else {
        console.log("my_ajax_obj未定义");
    }
});

修改后的PHP代码 #

<?php
/*
Plugin Name: Astral
Plugin URI: https://www.ejemplo.com
Description: Descripción del plugin.
Version: 1.0
Author: Tu Nombre
Author URI: https://www.tunombre.com
*/

// 激活插件
register_activation_hook(__FILE__, 'astral_plugin_activation');

function astral_plugin_activation() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'dhl_guias';
    $charset_collate = $wpdb->get_charset_collate();
    $sql = "CREATE TABLE $table_name (
        id INT NOT NULL AUTO_INCREMENT,
        nombre VARCHAR(100) NOT NULL,
        direccion VARCHAR(100) NOT NULL,
        PRIMARY KEY (id)
    ) $charset_collate;";
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}

// 停用插件
register_deactivation_hook(__FILE__, 'astral_plugin_deactivation');

function astral_plugin_deactivation() {
    // 停用逻辑
}

function astral_create_menu() {
    add_menu_page(
        'Astral',
        'Astral Menu',
        'manage_options',
        'astral-menu',
        'astral_menu_callback',
        'dashicons-admin-generic',
        1
    );
}
add_action('admin_menu', 'astral_create_menu');

function astral_menu_callback() {
    include plugin_dir_path(__FILE__) . 'astral_visual.php';
}

add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue( $hook ) {
   if ( 'toplevel_page_astral-menu' !== $hook ) {
      return;
   }

   wp_enqueue_script(
      'ajax-script',
      plugins_url( 'js/astral.js', __FILE__ ),
      array( 'jquery' )
   );

   wp_localize_script(
      'ajax-script',
      'my_ajax_obj',
      array(
         'ajax_url' => admin_url( 'admin-ajax.php' ),
         'nonce'    => wp_create_nonce( 'astral_ajax_nonce' ) // 统一nonce签名
      )
   );
}

add_action('wp_ajax_astral_save_form', 'astral_save_form');

function astral_save_form() {
    check_ajax_referer('astral_ajax_nonce', 'nonce'); // 验证签名匹配

    global $wpdb;
    $table_name = $wpdb->prefix . 'dhl_guias';

    $field1 = sanitize_text_field($_POST['field1']);
    $field2 = sanitize_text_field($_POST['field2']);

    $wpdb->insert(
        $table_name,
        array(
            'nombre' => $field1,
            'direccion' => $field2 // 移除自增id字段
        )
    );

    // 返回成功响应
    wp_send_json_success('数据保存成功');
    wp_die();
}

表单代码（无需修改） #

<form id="dhl_guias_form" method="POST">
    <input type="text" name="field1" placeholder="Campo 1" /><br>
    <input type="text" name="field2" placeholder="Campo 2" /><br> 
    <button type="submit" id="save" name="save">GUARDAR</button>
</form>

内容的提问来源于stack exchange，提问作者LD NQ