PHP表单无法通过AJAX提交问题求助

Hey there! Let's troubleshoot why your form on the /menu/ page is doing a full GET submission instead of firing an AJAX request. I’ve seen this issue a bunch of times, so here are the most common fixes to walk through:

By default, any form will trigger a full page reload when submitted—this is browser behavior, not a bug. You must explicitly stop this from happening so your AJAX code can run instead.

Here’s how to do it with vanilla JavaScript:

// Wait for the DOM to fully load first
document.addEventListener('DOMContentLoaded', function() {
  // Target your form (adjust the selector to match your form's ID/class)
  const menuForm = document.querySelector('#menu-submit-form');
  
  menuForm.addEventListener('submit', function(event) {
    // This line stops the default GET submission
    event.preventDefault();
    
    // Now run your AJAX logic here
    const formData = new FormData(this);
    fetch('/your-target-endpoint', {
      method: 'POST', // Or whatever method you need
      body: formData
    })
    .then(res => res.json())
    .then(data => {
      console.log('AJAX request succeeded:', data);
      // Add your success handling (e.g., update UI, show message)
    })
    .catch(err => {
      console.error('AJAX request failed:', err);
      // Handle errors here
    });
  });
});

If you’re using jQuery, it’s similar:

$(document).ready(function() {
  $('#menu-submit-form').on('submit', function(e) {
    e.preventDefault(); // Stop default submission
    
    $.ajax({
      url: '/your-target-endpoint',
      method: 'POST',
      data: $(this).serialize(),
      success: function(response) {
        console.log('Success:', response);
        // Handle success
      },
      error: function(xhr, status, err) {
        console.error('Error:', err);
        // Handle errors
      }
    });
  });
});

If your script runs before the form element loads in the DOM, the event listener won’t attach correctly. That’s why wrapping your code in DOMContentLoaded (vanilla JS) or $(document).ready() (jQuery) is critical—it ensures the form exists before you try to bind to it.

Double-check that your script is either placed at the bottom of the HTML body (after the form) or wrapped in one of those load handlers.

Make sure you’re targeting the right form! If your form has an ID like menu-form, using document.querySelector('.menu-form') (a class selector) won’t work. Verify your selector matches the form’s actual attributes—use the browser’s DevTools (right-click the form > Inspect) to confirm.

Open your browser’s DevTools (F12 > Console tab) and check for any red error messages. A typo in a variable name, missing closing bracket, or undefined function will stop your AJAX code from running entirely, letting the form fall back to its default GET submission.

• If your form has an action attribute set, the browser might prioritize that over your AJAX code. You can either remove the action or make sure your preventDefault() runs first.
• Are there other scripts on the page that bind to the form’s submit event? Sometimes multiple event listeners can interfere—use DevTools’ Event Listeners tab to check for duplicates.

Once you’ve gone through these steps, your form should start firing AJAX requests instead of doing full page reloads. Let me know if you hit any snags!

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