如何在JavaScript中编写onchange函数并结合AJAX发送带参POST请求

Hey there! Let's get this sorted step by step. You want to add onchange listeners to your checkbox, date picker, and name input to track their values in real-time, then send that data via a POST AJAX request when the form submits. Here's a straightforward implementation:

Full Modified Code #

HTML

<form onsubmit="sectionWork(event)">
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1" onchange="updateCheckbox()">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <div class="form-group">
    <label for="exampleInputDate">Date</label>
    <input type="date" id="exampleInputDate" name="date" onchange="updateDate()">
  </div>
  <div class="form-group">
    <label for="exampleName">Name</label>
    <input type="text" aria-placeholder="Enter Name" name="naming" class="form-control" id="naming" onchange="updateName()">
  </div>
  <button type="submit" class="btn btn-primary">Releasing</button>
</form>
<p id="p"></p>

JavaScript

// Maintain a single object to store all form values
const formData = {
  checkbox: false,
  date: "",
  name: ""
};

// Update checkbox value when it's toggled
function updateCheckbox() {
  const checkbox = document.getElementById('exampleCheck1');
  formData.checkbox = checkbox.checked; // Directly get boolean value (true/false)
}

// Update date value when user picks a date
function updateDate() {
  const dateInput = document.getElementById('exampleInputDate');
  formData.date = dateInput.value; // Gets date in YYYY-MM-DD format
}

// Update name value when user types
function updateName() {
  const nameInput = document.getElementById('naming');
  formData.name = nameInput.value;
}

const sectionWork = (event) => {
  // Prevent default form submission (stops page refresh)
  event.preventDefault();

  // Replace with your actual API endpoint URL
  const url = "/your-target-api-url";

  $.ajax(url, {
    type: 'POST',
    contentType: 'application/json', // Tell server we're sending JSON
    data: JSON.stringify(formData), // Convert object to JSON string for request body
    success: function (response) {
      console.log("Request successful:", response);
      // Add success UI feedback here if needed
    },
    error: function (error) {
      console.error("Request failed:", error);
      $('#p').append('Error: ' + (error.responseText || error.statusText));
    }
  });
}

Key Notes #

• Checkbox Handling: The checked property of a checkbox is already a boolean (true when selected, false when not), so we can use it directly without extra conversion.
• Real-Time Updates: Each onchange listener triggers immediately when the input's value changes (checkbox on click, others when focus is lost after editing), keeping formData always up to date.
• Prevent Page Refresh: Calling event.preventDefault() in the submit handler is critical — without it, the browser would reload the page and cancel your AJAX request.
• AJAX Configuration: Setting contentType: 'application/json' and converting formData to a JSON string ensures your backend can properly parse the request body. If your backend expects form-encoded data instead, you can omit the contentType line (jQuery will auto-encode the object for you).

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