基于jQuery Ajax实现多表单（含模态框表单）的提交问题

嘿，刚接触Ajax遇到这种问题太正常了！别着急，我来帮你把这个表单提交的问题彻底解决掉。

首先，你其实不用单独去处理单选按钮的选中状态——jQuery的serialize()方法本身就会自动收集表单里所有带name属性的控件值，包括选中的单选按钮！不管表单里有没有单选按钮，它都能智能处理，所以你之前的思路其实绕远路啦。

不过你的现有代码有两个小问题，导致你可能看不到预期的效果，我帮你一步步修正：

1. 修复回调函数里的this指向错误 #

在Ajax的done回调里，this默认指向的是Ajax的配置对象，不是你提交的那个表单元素。所以你之前用$(this).find(...)根本找不到表单里的输入框，自然没法清空它们。解决方法很简单：先把当前表单存到一个变量里，再在回调里用这个变量操作。

2. 完善错误处理（新手必备） #

只写done回调不够，如果后端出错或者网络出问题，你根本不知道哪里错了。加上fail回调能帮你快速排查问题，还能给用户友好的提示。

修改后的完整代码 #

$('form').submit(function (event) {
  event.preventDefault(); // 阻止浏览器默认的表单提交行为
  const $currentForm = $(this); // 把当前提交的表单存到变量里

  $.ajax({
    type: "POST",
    url: "./mailer/smart.php",
    data: $currentForm.serialize() // 自动收集所有表单控件的值，包括选中的单选
  }).done(function () {
    // 清空当前表单的所有输入，重置单选按钮到默认状态
    $currentForm.trigger("reset");
    $('#thankyou').show(); // 显示感谢弹窗
  }).fail(function (xhr, status, error) {
    // 错误处理：打印错误信息到控制台，同时提示用户
    console.error("表单提交失败：", error);
    alert("不好意思，提交失败了，请稍后再试哦！");
  });

  return false;
});

关键知识点解释 #

• $currentForm.serialize()：
  • 会自动收集所有带name属性的元素：文本框、电话框、邮箱框的输入值，以及选中的单选按钮（只有选中的那个单选值会被发送，这正是你需要的）。
  • 完全不用你手动去判断哪个单选被选中，省超多事！
• $currentForm.trigger("reset")：比单独清空输入框更彻底，它会把表单所有控件重置到初始状态（包括单选按钮的默认选中项）。
• 如果你的模态框表单是动态生成的（比如点击按钮才加载表单HTML），那要把事件绑定改成事件委托，确保新添加的表单也能触发提交事件：

  $(document).on('submit', 'form', function(event) {
    // 里面的代码和上面完全一样
  });
  

最后要检查的细节 #

1. 确保所有表单控件都有name属性：serialize()只认带name的元素，你的示例里都有，但别漏了哦！
2. 后端smart.php要正确接收$_POST参数：可以在后端先写print_r($_POST);看看有没有收到所有值，排除后端的问题。

这样修改后，不管是普通表单还是模态框里的表单，所有输入值（包括单选按钮）都能正确通过Ajax发送啦！

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