在jQuery Ajax请求中使用FormData对象导致页面重定向的问题

Hey there! Let's figure out why your page is redirecting when using FormData with jQuery Ajax. This is a super common gotcha, so let's break down the fixes step by step:

The most likely culprit is that you're not stopping the browser's native form submission action. Even with Ajax code running, the browser will still try to reload/redirect unless you explicitly prevent it.

Here's how to fix that in your submit handler:

$('#your-form-id').submit(function(e) {
  // Critical: Stop the browser's default form submission
  e.preventDefault();

  // Build FormData from the form (includes file inputs automatically)
  const formData = new FormData(this);

  // Your Ajax request with correct FormData settings
  $.ajax({
    url: '/your-server-endpoint',
    method: 'POST',
    data: formData,
    // These two settings are non-negotiable for FormData
    processData: false, // Don't let jQuery parse the FormData into a string
    contentType: false, // Let the browser set the correct multipart/form-data header
    success: function(response) {
      console.log('Submission successful:', response);
      // Handle your JSON response here
    },
    error: function(xhr, status, err) {
      console.error('Submission failed:', err);
    }
  });

  // Optional extra insurance (though e.preventDefault() should be enough)
  return false;
});

When working with FormData, these two settings are mandatory:

• processData: false: jQuery automatically tries to serialize data into a query string, which will corrupt file data in FormData. Disabling this lets the browser handle the data correctly.
• contentType: false: If you set this manually to multipart/form-data, you'll miss the auto-generated boundary string the browser needs to split form fields and files. Letting the browser set this header avoids that mistake.

• Make sure your file input has a valid name attribute—your server needs this to retrieve the uploaded file:

<input type="file" name="thumbnail" accept="image/*" />

• While not strictly required (since Ajax overrides it), adding enctype="multipart/form-data" to your form tag can prevent edge-case issues:

<form id="your-form-id" enctype="multipart/form-data">
  <!-- Your form fields + file input -->
</form>

If you're using a button to trigger submission, ensure it's not a default submit button. Buttons without an explicit type attribute default to type="submit", which will trigger the form's native redirect:

<!-- ❌ Bad: Defaults to type="submit", triggers redirect -->
<button onclick="submitMyForm()">Submit</button>

<!-- ✅ Good: Explicit button type avoids accidental submission -->
<button type="button" onclick="submitMyForm()">Submit</button>

After adjusting your code with these steps, your Ajax submission should work without page redirects, just like your original setup—now with file upload support!

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