ajax成功響應后如何刷新div

Question

我有一個帶有 ajax 請求的表單，當不尊重字段並單擊提交按鈕時，將顯示消息而不刷新頁面。 這行得通，問題是如果多次提交表單，錯誤消息會累積並同時顯示多條消息。

例如：如果您將字段名稱留空然后提交，則會出現錯誤消息（必填字段）。 當您輸入您的姓名，然后提交成功消息（設置已保存）出現但錯誤消息仍然可見。

我想一次只得到一條消息，因此 div 應該更新顯示新消息並刪除前一條消息。

現在，我嘗試進行一些研究，並且我理解$("#my-div").load("#my-div");的 if 條件。 可以在這些情況下使用，但我不知道該怎么做，我對這一切都很陌生。

誰能幫助我了解如何實現這一目標？ 感謝您的任何幫助，並感謝您的任何回復。

我的表格

<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);  
      }

    });
    });
});

功能.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();

}

Answer 1

您已經使用jQuery('.msg_box').append(response)方法來顯示消息。 文檔明確指出，這用於將由參數指定的內容插入到匹配元素集中每個元素的末尾。

自然地給你多條消息。 如果您只需要一條消息，請使用：

jQuery('.msg_box').html(response)

.html()將確保每次都覆蓋容器的內容。

參考：官方文檔