如何用jQuery Ajax同时发送JSON数据与参数实现注册提交？

Got it, let's get this registration POST request sorted out for you! Here's how you can modify your sendObj() function to send both your user JSON data and additional parameters via jQuery Ajax, while also avoiding the annoying page refresh that comes with default form submissions:

Step 1: Tweak your "Create Account" button (optional but simpler) #

Instead of using an <input type="submit"> which triggers the form's default refresh behavior, switch to a button element to cut down on extra code:

<button type="button" onclick="sendObj();">Create</button>

If you want to keep the submit input, just make sure to pass the event to your function and prevent the default action (we'll include that in the function below).

Step 2: Updated sendObj() Function #

Here's the revised function that builds your user data, adds any extra parameters you need, and sends everything smoothly via Ajax:

function sendObj(event) {
  // Uncomment this line if using <input type="submit"> to stop page refresh
  // event.preventDefault();

  // 1. Build your user object with form values
  var user = {
    firstName: $('#firstName').val(),
    lastName: $('#lastName').val(),
    username: $('#username').val(),
    password: $('#password').val(),
    password1: $('#password1').val(),
    phoneNumber: $('#phoneNumber').val(),
    email: $('#email').val()
    // Add any other form fields you need here
  };

  // 2. Define your extra parameters (customize this to your needs)
  var extraParams = {
    registrationSource: "web",
    requestTimestamp: Date.now()
  };

  // 3. Merge user data and extra parameters into one payload
  // Use $.extend if you don't support ES6 spread syntax
  var postData = $.extend({}, { user: user }, extraParams);
  // Or with ES6: var postData = { user, ...extraParams };

  // 4. Send the Ajax request to your server
  $.ajax({
    url: "/your-registration-api-endpoint", // Replace with your actual server URL
    type: "POST",
    contentType: "application/json", // Critical for telling server to parse JSON
    data: JSON.stringify(postData), // Convert payload to JSON string
    success: function(response) {
      // Handle successful registration feedback
      alert("Account created successfully! 🎉");
      // Optional: Reset the form for future use
      $("#your-form-id")[0].reset();
    },
    error: function(xhr, status, error) {
      // Handle errors like duplicate username or invalid email
      console.error("Registration failed:", error);
      alert("Oops, something went wrong. Please check your input and try again.");
    }
  });
}

Key Things to Keep in Mind: #

• Content-Type Header: When sending JSON data, always set contentType: "application/json" — this tells your server to parse the request body as JSON instead of standard form data.
• Payload Structure: The example nests the user object under a user key and adds top-level extra parameters, but you can adjust this to match exactly what your server expects (e.g., flatten all fields if preferred).
• Error Handling: The error callback helps you catch issues like network failures or server-side validation errors — make sure to give users clear, actionable feedback here.
• Form Reset: Adding $("#your-form-id")[0].reset() after a successful submission clears the form for a cleaner user experience.

If your server expects form-urlencoded data instead of JSON, you can skip JSON.stringify() and remove the contentType line (jQuery uses form-urlencoded by default). Just pass the postData object directly to the data property of the Ajax call.

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