使用FontAwesome时，如何根据文本变化与后端响应动态刷新按钮？

Got it, let's work through this toggle behavior step by step. I'll share a practical, reusable solution that handles all the UI updates you need—based on the backend response—using jQuery (easily adaptable to vanilla JS if that's your stack).

Step 1: Base HTML Structure #

First, let's define a typical row setup that aligns with your description. We'll use data attributes to store the row ID for easy access, and set initial classes for archived vs non-archived rows:

<!-- Archived row (blue background) -->
<tr class="data-row bg-blue" data-row-id="12518">
  <td>Sample Archived Entry</td>
  <td>
    <form class="unarchive-form" action="/your-toggle-endpoint" method="POST">
      <input type="hidden" name="row_id" value="12518">
      <button type="submit" class="toggle-btn">
        <i class="fa fa-undo"></i> Unarchive
      </button>
    </form>
  </td>
</tr>

<!-- Non-archived row -->
<tr class="data-row" data-row-id="12519">
  <td>Sample Active Entry</td>
  <td>
    <form class="archive-form" action="/your-toggle-endpoint" method="POST">
      <input type="hidden" name="row_id" value="12519">
      <button type="submit" class="toggle-btn">
        <i class="fa fa-archive"></i> Archive
      </button>
    </form>
  </td>
</tr>

Step 2: JavaScript/AJAX Logic #

We'll use event delegation to handle clicks on dynamically generated buttons, send an AJAX request to your backend, and update the UI in real time based on the response:

// Handle toggle form submissions
$(document).on('submit', '.archive-form, .unarchive-form', function(e) {
  e.preventDefault(); // Stop page refresh
  
  const $form = $(this);
  const $row = $form.closest('.data-row');
  const isUnarchiving = $form.hasClass('unarchive-form');

  // Send request to backend
  $.ajax({
    url: $form.attr('action'),
    method: 'POST',
    data: $form.serialize(),
    dataType: 'json',
    success: function(response) {
      // Only update UI if backend confirms success
      if (response.status === true) {
        if (isUnarchiving) {
          // Case 1: Just unarchived the row
          $row.removeClass('bg-blue');
          $form.removeClass('unarchive-form').addClass('archive-form');
          $form.find('.toggle-btn')
            .text('Archive')
            .find('i').removeClass('fa-undo').addClass('fa-archive');
        } else {
          // Case 2: Just archived the row
          $row.addClass('bg-blue');
          $form.removeClass('archive-form').addClass('unarchive-form');
          $form.find('.toggle-btn')
            .text('Unarchive')
            .find('i').removeClass('fa-archive').addClass('fa-undo');
        }
      } else {
        // Optional: Handle failure (e.g., show an alert or toast)
        alert('Failed to update status. Please try again.');
      }
    },
    error: function() {
      alert('Server error. Please check your connection and try later.');
    }
  });
});

Key Details Breakdown #

• Event Delegation: Using $(document).on('submit', ...) ensures the handler works even for rows added dynamically after page load (e.g., from pagination or filters).
• DOM Traversal: closest('.data-row') lets us target the parent row without hardcoding IDs, making the code reusable across all rows.
• Conditional Updates: We check if we're unarchiving or archiving first, then flip all relevant UI elements (background color, button text, icon, form class) in one go.
• Response Validation: We strictly check response.status === true to trigger UI changes, matching your backend's response format exactly.

You can tweak class names, FontAwesome icons, or error handling to fit your project's exact setup—this is a flexible foundation that covers both directions of the toggle.

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