如何使用jQuery on()方法绑定多选择器多事件触发表单AJAX提交

核心逻辑是把重复的AJAX提交逻辑抽为公共函数，分别绑定到表单提交、复选框触发两个场景即可，修改后代码如下：

// 抽离公共提交函数，统一维护提交逻辑
function submitForm(form) {
  const form_data = new FormData(form);
  // 可选：如果需要复选框未选中时也向后端传0，打开下方注释
  /*
  const checkbox = $(form).find('.checkbox_ajx')[0];
  if (checkbox && !checkbox.checked) {
    form_data.append(checkbox.name, 0);
  }
  */
  $.ajax({
    type: 'post',
    url: 'php/extra_update.php',
    data: form_data,
    processData: false,
    contentType: false,
    cache: false,
    success: function(data) {
      console.log(data);
      var jsondata = $.parseJSON(data);
      console.log(jsondata);
    }
  })
}

// 绑定表单submit事件
$('.formdataaj').each(function() {
  $(this).on('submit', function(e) {
    e.preventDefault();
    submitForm(this);
  })
  // 绑定内部复选框change事件
  $(this).on('change', '.checkbox_ajx', function() {
    submitForm($(this).closest('.formdataaj')[0]);
  })
})

实现说明 #

• 公共函数submitForm接收表单DOM作为入参，所有提交逻辑统一在这里维护，后续修改只需要调整这一处即可同时生效于两个触发场景
• 复选框绑定change事件，触发时自动查找所属的父级表单，调用公共提交方法，FormData会自动获取表单内所有控件的最新值，包括复选框的选中状态
• 默认情况下复选框未选中时不会在FormData中携带对应参数，如果后端要求未选中时必须传0，打开代码中注释的可选处理段即可

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