WordPress中提交AJAX表单出现400错误的求助

问题概述 #

基于WordPress/WooCommerce搭建的个人网站，开发了用户修改姓名的账户表单，已实现无刷新提交，但AJAX请求返回400错误。

错误原因分析 #

1. AJAX Action不匹配：表单中隐藏域action值为save_account_details，但functions.php中注册的AJAX钩子是wp_ajax_custom_action，两者不一致。
2. 回调函数名不匹配：注册钩子时指定的回调是save_account_details，但实际定义的函数是custom_action。
3. Nonce验证缺失：表单生成了nonce，但后端没有验证，这是WordPress AJAX请求400错误的常见诱因。
4. 表单编码类型与序列化方式冲突：表单设置了enctype="multipart/form-data"但JS使用serialize()，若无需文件上传可移除该属性。

修正后的代码 #

1. 表单代码

移除不必要的enctype属性，修正form标签内错误的钩子调用（钩子应在functions.php中注册）：

<form name="Form" class="mts-edit-account" action="<?php echo admin_url('admin-ajax.php'); ?>" method="post"> 
  <!-- First & Last Name Field -->
  <div class="row name_surname">
    <div class="form-row">
      <label class="t3" for="account_first_name">Nome *</label>
      <input type="text" placeholder="Inserisci il tuo nome" class="field-settings" name="account_first_name" id="account_first_name" value="<?php echo esc_attr( $user->first_name ); ?>" />
    </div>

    <div class="form-row">
      <label class="t3" for="account_last_name">Cognome *</label>
      <input type="text" placeholder="Inserisci il tuo cognome" class="field-settings" name="account_last_name" id="account_last_name" value="<?php echo esc_attr( $user->last_name ); ?>" />
    </div> 

    <!-- Save Settings -->
    <p style="margin-bottom: 0px!important;">
      <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?>
      <button type="submit" class="edit-account-button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Salva modifiche', 'woocommerce' ); ?></button>
      <input type="hidden" name="action" value="save_account_details" />
    </p>
  </div>
</form>

2. JS脚本代码

添加错误捕获逻辑，方便排查异常：

jQuery(document).ready(function($) {
    
    $('.mts-edit-account').on('submit', function(e) {
        e.preventDefault();

        var $form = $(this);

        $.post($form.attr('action'), $form.serialize(), function(data) {
            if (data.error) {
                alert('Errore: ' + data.error_message);
            } else {
                alert('Modifiche salvate con successo!');
                // 可选：更新页面显示的姓名
                $('#account_first_name').val(data.first_name);
                $('#account_last_name').val(data.last_name);
            }
        }, 'json')
        .fail(function(xhr, status, error) {
            console.log('AJAX Error:', xhr.responseText);
            alert('Si è verificato un errore durante il salvataggio');
        });
    });

});

3. functions.php代码

修正AJAX钩子注册，添加nonce验证与用户信息更新逻辑：

// 注册AJAX钩子，匹配表单中的action值
add_action( 'wp_ajax_save_account_details', 'save_account_details' );
add_action( 'wp_ajax_nopriv_save_account_details', 'save_account_details' );

function save_account_details() {
    $response = array(
        'error' => false,
        'first_name' => '',
        'last_name' => ''
    );

    // 验证Nonce
    if ( !isset($_POST['save-account-details-nonce']) || !wp_verify_nonce($_POST['save-account-details-nonce'], 'save_account_details') ) {
        $response['error'] = true;
        $response['error_message'] = 'Nonce validation failed';
        wp_send_json($response);
    }

    // 验证用户登录状态
    if ( !is_user_logged_in() ) {
        $response['error'] = true;
        $response['error_message'] = 'Devi essere loggato per modificare i tuoi dati';
        wp_send_json($response);
    }

    $user_id = get_current_user_id();
    $first_name = trim($_POST['account_first_name']);
    $last_name = trim($_POST['account_last_name']);

    // 验证姓名必填
    if (empty($first_name)) {
        $response['error'] = true;
        $response['error_message'] = 'Nome è obbligatorio';
        wp_send_json($response);
    }
    if (empty($last_name)) {
        $response['error'] = true;
        $response['error_message'] = 'Cognome è obbligatorio';
        wp_send_json($response);
    }

    // 更新用户信息
    $user_data = array(
        'ID' => $user_id,
        'first_name' => $first_name,
        'last_name' => $last_name
    );
    wp_update_user($user_data);

    // 返回更新后的姓名
    $response['first_name'] = $first_name;
    $response['last_name'] = $last_name;

    wp_send_json($response);
}

额外说明 #

• 若需支持文件上传（如头像），需保留enctype="multipart/form-data"，并将JS中的$form.serialize()替换为new FormData($form[0])，同时在$.post配置中添加processData: false, contentType: false选项。
• 使用wp_send_json()替代exit(json_encode())，该函数会自动设置正确的Content-Type头并终止脚本执行，更符合WordPress规范。

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