在Bootstrap模态框中实现jQuery AJAX表单提交

<!-- 主页面上的模态框结构 -->
<div id="myModalPositions" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">操作标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 动态加载的内容将显示在这里 -->
        <p>加载中...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary openStandings" data-href="form_content.html">
  打开表单模态框
</button>

<script type="text/javascript">
$(document).ready(function() {
  $('.openStandings').on('click', function(e) {
    e.preventDefault();
    var url = $(this).attr('data-href');
    $('#myModalPositions').modal('show').find('.modal-body').load(url, function() {
      // 内容加载完成后可以执行一些初始化操作
      console.log('模态框内容已加载。');
    });
  });
});
</script>

<!-- form_content.html 的内容示例 -->
<form name="form1" id="form1">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" name="name" id="name" placeholder="请输入姓名">
  </div>
  <!-- 错误的提交按钮示例 -->
  <button type="submit" class="btn btn-primary updateData" data-dismiss="modal">提交</button>
</form>

<script type="text/javascript">
// 这种直接绑定方式对于动态加载的内容可能存在问题，稍后会修正
$("#form1").submit(function (event) {
    event.preventDefault(); // 阻止表单默认提交行为
    var formData = $(this).serialize();
    $.ajax({
      type: "POST",
      url: "proceed.cfm", // 您的后端处理URL
      data: formData
    }).done(function (data) {
      console.log("AJAX请求成功:", data);
      // 可以在这里处理成功后的逻辑，例如：
      // $('#myModalPositions').modal('hide'); // 成功后手动关闭模态框
      // alert('数据提交成功！');
    }).fail(function(jqXHR, textStatus, errorThrown) {
      console.error("AJAX请求失败:", textStatus, errorThrown);
      // 处理错误
    });
});
</script>

<!-- form_content.html 的修正内容 -->
<form name="form1" id="form1">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" name="name" id="name" placeholder="请输入姓名">
  </div>
  <!-- 正确的提交按钮示例：移除了 data-dismiss="modal" -->
  <button type="submit" class="btn btn-primary updateData">提交</button>
</form>

<script type="text/javascript">
// 注意：对于动态加载的内容，事件委托是更稳健的绑定方式
// 建议将此脚本放在主页面，并使用事件委托
</script>

// 建议将此脚本放在主页面，而不是动态加载的 form_content.html 中
$(document).ready(function() {
  // ... 模态框打开和加载内容的脚本 ...

  // 使用事件委托绑定表单提交事件
  $(document).on('submit', '#form1', function (event) {
    event.preventDefault(); // 阻止表单默认提交行为

    var $form = $(this); // 获取当前提交的表单
    var formData = $form.serialize();

    // 可选：显示加载状态
    $form.find('.updateData').prop('disabled', true).text('提交中...');

    $.ajax({
      type: "POST",
      url: "proceed.cfm", // 您的后端处理URL
      data: formData
    }).done(function (data) {
      console.log("AJAX请求成功:", data);
      // 处理成功后的逻辑
      alert('数据提交成功！');
      $('#myModalPositions').modal('hide'); // 成功后手动关闭模态框
    }).fail(function(jqXHR, textStatus, errorThrown) {
      console.error("AJAX请求失败:", textStatus, errorThrown);
      alert('数据提交失败，请重试。');
    }).always(function() {
      // 无论成功或失败，恢复按钮状态
      $form.find('.updateData').prop('disabled', false).text('提交');
    });
  });
});