AJAX用serialize()提交复选框值异常：动态值失效硬编码有效

核心问题梳理 #

• 变量大小写不匹配：你定义了var ID = $(this).attr("ID");，但AJAX请求中引用的是小写id，导致变量未定义，参数拼接后出现&id=undefined，破坏请求格式。
• 未阻止表单默认提交行为：表单触发submit事件时，浏览器会执行默认页面跳转，直接中断AJAX请求，导致数据无法发送到后端。
• 重复绑定事件：每次点击.update按钮都会给#update_form绑定一次submit事件，多次点击后提交表单会触发多轮AJAX请求，引发异常。

修正后的代码 #

$(document).on("click", ".update", function() {
  var id = $(this).attr("ID"); // 统一变量名，避免引用错误
  
  if (confirm("Update")) {
    $('#update').modal('show');
  } else {
    return false;
  }

  // 先解绑原有事件，避免重复绑定
  $('#update_form').off("submit").on("submit", function(e) {
    e.preventDefault(); // 阻止表单默认提交，确保AJAX正常执行
    
    var update = [];
    $.each($("input[name='Ucheckbox[]']:checked"), function() {
      update.push($(this).val());
    });
    
    var un = update.join(",");
    
    $.ajax({
      url: "url/api",
      method: "POST",
      data: $('#update_form').serialize() + "&id=" + id + "&un=" + un,
      success: function(data) {
        alert(data);
        $('#update').modal('hide'); // 成功提交后关闭模态框
      },
      error: function(res) {
        alert('Error');
      }
    });
  });
});

优化建议（更安全的参数拼接） #

手动拼接字符串可能出现编码问题，推荐用serializeArray()配合$.param()处理参数：

// 替换原data拼接逻辑
var formData = $('#update_form').serializeArray();
formData.push({name: 'id', value: id});
formData.push({name: 'un', value: un});

$.ajax({
  url: "url/api",
  method: "POST",
  data: $.param(formData), // 自动处理参数编码，避免格式错误
  success: function(data) {
    alert(data);
    $('#update').modal('hide');
  },
  error: function(res) {
    alert('Error');
  }
});

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