单选按钮切换数据重复累加问题及解决方案咨询

Hey there! Let's sort out that frustrating problem where your new user data keeps appending to the old list instead of replacing it. The good news is this has nothing to do with resetting the $_POST variable—each AJAX request is a fresh call to your server, so the $_POST values are always current for that specific click.

The Root Cause & Frontend Fix #

You're using jQuery's append() method, which adds new content to the end of the existing element. Instead, you need to clear out the old table rows first before adding new ones.

Add this line right at the start of your success function, before you calculate the response length:

$("#example").empty();

Here's your updated JavaScript code with this fix (plus a tiny tweak to fix duplicate IDs):

$('#selection').change(function() {
    var selected_value = $("input[name='users']:checked").val();
    $.ajax({
        url: "approval_ajax.php",
        dataType: "json",
        type: "POST",
        cache: false,
        data: { selected_value: selected_value },
        success: function(response) {
            console.log(response);
            // Clear existing table rows first
            $("#example").empty();
            var len = response.length;
            for(var i=0; i<len; i++){
                var id = response[i].id;
                var email = response[i].email;
                var employee_id = response[i].employee_id;
                var first_name = response[i].first_name;
                var middle_name = response[i].middle_name;
                var last_name = response[i].last_name;
                var mobile = response[i].mobile;
                var created_on = response[i].created_on;
                var disabled = response[i].disabled;

                // Fixed: Removed duplicate id='select_all' (IDs must be unique!)
                var tr_str = "<tr>" + 
                    "<td>" + (i+1) + "</td>" + 
                    "<td>" + email + "</td>" + 
                    "<td>" + employee_id + "</td>" + 
                    "<td>" + first_name + "&nbsp;" + middle_name + "&nbsp;" + last_name + "</td>" + 
                    "<td>" + mobile + "</td>" + 
                    "<td>" + created_on + "</td>" + 
                    "<td><input type='checkbox' name='check[]'" + disabled + "value= '" + id + "' class='checkbox' ></td>" + 
                    "<input type='hidden' value='" + id + "' name='user_id' >" + 
                    "</tr>";
                $("#example").append(tr_str);
            }
            alert("AJAX was a success");
        }
    });
});

A Small Bug in Your PHP Code #

I noticed your $disabled logic isn't working because the $status variable is never assigned a value. Add this line inside your while loop to fix it:

$status = $row['status'];

Here's the corrected PHP snippet:

while ($row = mysql_fetch_array($sq)) {
    $status = $row['status']; // This line was missing!
    $disabled = '';
    if ($status == '1') {
        $disabled = "disabled = 'disabled' checked='checked' ";
    }
    // Rest of your row data assignment code...
}

Also, heads up: mysql_fetch_array is a deprecated function. If your Database class supports it, switch to mysqli_fetch_array or PDO methods to avoid future compatibility issues.

Bonus Optimization Tips #

• Use ES6 template strings to make your HTML generation cleaner and easier to read:

  const trStr = `
  <tr>
      <td>${i+1}</td>
      <td>${email}</td>
      <td>${employee_id}</td>
      <td>${first_name} ${middle_name} ${last_name}</td>
      <td>${mobile}</td>
      <td>${created_on}</td>
      <td><input type='checkbox' name='check[]' ${disabled} value='${id}' class='checkbox'></td>
      <input type='hidden' value='${id}' name='user_id'>
  </tr>
  `;
  

• Add a loading spinner or message when the AJAX request starts to let users know something's happening, then hide it when the request completes.

With these changes, clicking each radio button will now replace the existing list with the correct set of users instead of appending to it!

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