如何通过jQuery/Ajax实现Node.js DELETE请求完成分类删除？

Here's how you can finish your jQuery/Ajax code to handle category deletion smoothly:

$(document).ready(function(){
  $('.removeCategory').on('click', function(e) {
    // Stop the link from jumping to the top of the page
    e.preventDefault();
    
    // Grab the category ID from the button's data attribute
    const categoryId = $(this).data('id');
    // Save a reference to the button for later use in the success callback
    const $deleteBtn = $(this);
    
    // Ask the user to confirm before deleting (avoids accidental clicks)
    if (confirm('Are you sure you want to delete this category?')) {
      // Send the DELETE request to your backend endpoint
      $.ajax({
        url: `/categories/delete/${categoryId}`,
        method: 'DELETE',
        success: function() {
          // Option 1: Remove the category's row from the page without reloading
          $deleteBtn.closest('tr').fadeOut(300, function() {
            $(this).remove();
          });
          
          // Option 2: Redirect to the categories page to see the backend's flash message
          // window.location.href = '/manage/categories';
          
          // Optional: Show a quick success alert
          alert('Category deleted successfully!');
        },
        error: function(xhr, status, error) {
          // Log the error details for debugging
          console.error('Deletion failed:', error);
          // Show a user-friendly error message
          alert('Oops, something went wrong. Could not delete the category.');
        }
      });
    }
  });
});

Key Details Explained: #

• Prevent Default Action: e.preventDefault() stops the anchor tag from performing its default behavior (navigating to #).
• Data Attribute: We use $(this).data('id') to get the category ID stored in the button's data-id attribute.
• Confirmation Dialog: The confirm() prompt ensures users don't delete categories by mistake.
• Ajax Request: We specify method: 'DELETE' to match your backend's router setup, and the URL includes the category ID.
• Success Handling:
  • Option 1 gives a smooth fade-out effect and removes the category row instantly (better UX, no page reload).
  • Option 2 redirects to the categories page to display the flash message your backend sets (req.flash('success','Category Deleted')).
• Error Handling: We log errors for debugging and show a simple alert to the user if the deletion fails.

If you choose Option 1 (no reload), you might want to add a dynamic success message to the page instead of an alert to match your app's design. But either approach works depending on your needs.

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