如何在Ajax请求成功后刷新Div，避免表单消息叠加

我有一个集成Ajax请求的表单，字段不满足要求时点击提交能无刷新显示消息，但多次提交后错误消息会累加。比如留空姓名字段提交，会显示「字段必填」的错误；输入姓名提交后显示「设置已保存」的成功消息，但之前的错误消息还在。我需要同一时间只显示一条消息，用新消息覆盖旧消息。

我当前的代码 #

表单代码 #

<form name="Form" class="mts-edit-account" action="<?php echo admin_url('admin-ajax.php'); ?>" method="post" enctype="multipart/form-data" <?php add_action( 'woocommerce_edit_account_form_tag', 'action_woocommerce_edit_account_form_tag' );?> > 
  
  <!-- Message section -->
  <div class="msg_box"></div>

  <!-- Fist & 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>

脚本代码 #

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

    //Ajax function
    jQuery.ajax({
      
      type: "post",
      data: jQuery(".mts-edit-account").serialize(),
      url: "wp-admin/admin-ajax.php",
      success : function( response ) {
        jQuery('.msg_box').append(response);  
      }

    });
    });
});

Functions.php代码 #

add_action( 'wp_ajax_save_account_details', 'save_account_details' );
add_action( 'woocommerce_save_account_details_errors','save_account_details', 10, 1 );
function save_account_details() {

  if (trim($_POST['account_first_name']) == '') {
    $response = wc_print_notices( $return = false );
  } else {
    $response = "Settings Saved!";
  }

  // Don't forget to exit at the end of processing
  echo json_encode($response);
  exit();

}

解决方案 #

1. 修改JavaScript代码（替换消息而非追加） #

核心问题是用了append()方法（会把新消息追加到旧消息后），改成html()即可直接替换.msg_box内的所有内容，同时优化代码效率：

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

        // 提交时先清空消息框（可选，避免等待响应时显示旧内容）
        $('.msg_box').html('');

        jQuery.ajax({
            type: "post",
            data: $(this).serialize(), // 用当前表单对象替代全局选择器，更高效
            url: "wp-admin/admin-ajax.php",
            dataType: "json", // 指定接收JSON格式响应
            success : function( response ) {
                $('.msg_box').html(response.data);  
            }
        });
    });
});

2. 修正PHP函数（确保返回正确内容） #

原代码中wc_print_notices($return=false)会直接输出内容而非返回给变量，同时钩子使用错误，修正后如下：

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() {
    // 验证安全nonce，防止CSRF攻击
    if ( ! isset( $_POST['save-account-details-nonce'] ) || ! wp_verify_nonce( $_POST['save-account-details-nonce'], 'save_account_details' ) ) {
        wp_send_json_error( '无效的安全验证' );
        exit;
    }

    $response = '';
    if ( trim( $_POST['account_first_name'] ) == '' ) {
        // 添加WooCommerce错误提示
        wc_add_notice( __( '字段必填', 'woocommerce' ), 'error' );
        // 获取错误消息HTML并返回（参数true表示返回内容而非直接输出）
        $response = wc_print_notices( true );
    } else {
        // 这里可以添加实际保存用户信息的逻辑，例如：
        // wp_update_user( array( 'ID' => get_current_user_id(), 'first_name' => $_POST['account_first_name'] ) );
        
        $response = "<div class='success-notice'>设置已保存！</div>"; // 给成功消息加样式类，方便自定义样式
    }

    wp_send_json_success( $response ); // 用WordPress内置函数返回JSON响应，更规范
    exit();
}

3. 关键说明 #

• html()方法会完全替换目标元素内的所有内容，彻底解决消息累加问题；
• 提交时清空消息框能提升用户体验，避免等待响应期间看到旧消息；
• PHP中必须使用wc_print_notices(true)才能正确获取错误消息的HTML代码；
• 添加nonce验证是WordPress开发的安全规范，不可省略；
• 可以给成功/错误消息添加CSS类，方便自定义样式（比如给错误消息加红色字体，成功消息加绿色字体）。

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