Bootstrap 4表单提交后AJAX成功消息闪显消失问题

看起来你已经搞定了数据插入的核心功能，只是消息展示的逻辑有点小问题——现在你是直接把触发模态框的按钮所在的#feedback整个替换成了成功消息，而且alert弹窗会阻塞JS执行，导致你看到的消息刚出来就被后续的隐藏逻辑影响，出现闪显的情况。下面给你两个针对性的解决方案，你可以根据需求选：

方案一：在模态框内展示成功消息（推荐） #

这个方案更符合用户体验，提交后不用关闭模态框就能看到反馈，还可以顺便清空表单方便再次提交：

1. 先修改模态框的HTML，在表单后面加一个隐藏的消息容器：

<div class="modal-body">
  <form class="feedback" name="feedback">
    <!-- 你的表单内容保持不变 -->
  </form>
  <!-- 添加成功消息容器，默认隐藏 -->
  <div id="modal-success" class="alert alert-success mt-3 d-none" role="alert"></div>
</div>

2. 然后调整你的JS代码，去掉阻塞的alert，改用模态框内的容器展示消息：

$("button#submit").click(function(e) {
  e.preventDefault(); // 明确阻止按钮的默认提交行为
  $.ajax({
    type: "POST",
    url: "insert.php",
    data: $('form.feedback').serialize(),
    success: function(data) {
      // 清空表单内容
      $('form.feedback')[0].reset();
      // 显示成功消息
      $("#modal-success").text(data).removeClass('d-none');
      // 5秒后自动隐藏消息（可选：也可以保留消息让用户手动关闭）
      setTimeout(function() {
        $("#modal-success").addClass('d-none');
        // 如果需要自动关闭模态框，就打开下面的注释
        // $('#feedback-modal').modal('hide');
      }, 5000);
    },
    error: function() {
      alert("提交失败，请重试");
    }
  });
});

方案二：在页面主区域展示成功消息 #

如果你希望关闭模态框后在页面上显示成功提示，可以这么改：

1. 修改#feedback的HTML，保留触发按钮，新增消息容器：

<div id="feedback">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#feedback-modal">Setup Your Course</button>
  <!-- 新增成功消息容器 -->
  <div id="page-success" class="alert alert-success mt-2 d-none" role="alert"></div>
</div>

2. 调整JS代码，关闭模态框后显示页面消息：

$("button#submit").click(function(e) {
  e.preventDefault();
  $.ajax({
    type: "POST",
    url: "insert.php",
    data: $('form.feedback').serialize(),
    success: function(data) {
      // 关闭模态框
      $('#feedback-modal').modal('hide');
      // 显示页面上的成功消息
      $("#page-success").text(data).removeClass('d-none');
      // 5秒后隐藏消息
      setTimeout(function() {
        $("#page-success").addClass('d-none');
      }, 5000);
    },
    error: function() {
      alert("提交失败，请重试");
    }
  });
});

额外的小修正 #

顺便提一下你代码里的一个小bug：模态框里的Semester End输入框，id写错成了Startsemester，应该改成Endsemester，不然可能会影响后续的表单操作：

<label>Semester End</label>
<input type="text" name="Endsemester" id="Endsemester" class="form-control" />

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