更新特定记录时总是修改数据库第一条记录，求排查JQuery问题

Hey there, let's dig into why your Campaign update is always hitting the first record—this is a super common gotcha, so let's break down the jQuery-side issues to check step by step:

1. Verify You're Sending the Correct Campaign ID in the AJAX Request #

This is the #1 culprit for this type of bug. If your backend isn't receiving the ID of the record you want to update, it'll default to whatever's easiest (like the first record in a query, or a null value that maps to the first entry).

• Check if your update form includes a hidden input field for the Campaign ID, and that it's populated with the target record's ID when the edit action is triggered:

  <!-- Inside your update form -->
  <input type="hidden" name="campaignId" id="updateCampaignId" value="">
  

• Make sure when the user clicks "Edit" on a specific record, you're correctly setting this hidden field's value. For example, if your records are in a table:

  $(".edit-btn").click(function() {
      // Get the ID from the table row's data attribute
      const targetId = $(this).closest("tr").data("campaign-id");
      // Populate the hidden field in your update form
      $("#updateCampaignId").val(targetId);
      // Also populate other form fields (name, description, etc.) from the selected row
      $("#campaignName").val($(this).closest("tr").find(".campaign-name").text());
  });
  

2. Check for Duplicate IDs in Your JSP #

If you're looping through Campaign records to render edit buttons/forms, it's easy to accidentally reuse the same id attribute across multiple elements (e.g., <input id="campaignId"> in every row). Since jQuery uses the first matching element when selecting by ID, you'll always get the first record's ID instead of the target one.

• Fix this by using classes instead of IDs for repeated elements, or add a unique suffix to IDs (like campaignName-${campaign.id}). Then use the edit button's context to target the right fields:

  // Example using data attributes instead of duplicate IDs
  <tr data-campaign-id="${campaign.id}">
      <td class="campaign-name">${campaign.name}</td>
      <td><button class="edit-btn">Edit</button></td>
  </tr>
  

3. Inspect the AJAX Request Payload #

Open your browser's DevTools (F12 → Network tab), trigger the update request, and check the Form Data or Request Payload to confirm:

• Does the payload include the correct campaignId (not the first record's ID)?
• Are all other form fields mapped correctly to the target record?

You can also add a quick console.log in your jQuery code to debug the data being sent:

$.ajax({
    url: "/updatecampaign",
    type: "POST",
    data: $("#updateForm").serialize(),
    beforeSend: function() {
        console.log("Data being sent: ", $("#updateForm").serialize());
    },
    success: function(response) {
        // Handle success
    },
    error: function(xhr) {
        // Handle error
    }
});

4. Confirm Your Form Serialization is Working #

If you're using $("#updateForm").serialize(), ensure all fields (including the hidden ID field) have the correct name attribute that matches your backend's expected parameter names. For example, if your Spring Controller uses @RequestParam("campaignId") Long id, your input must have name="campaignId".

9 times out of 10, this issue boils down to not passing the target record's ID correctly—either because the hidden field isn't populated, you're grabbing the wrong ID via duplicate selectors, or the ID isn't included in the AJAX payload at all. Start with verifying the ID flow from edit click to AJAX request, and you'll likely spot the problem.

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