jquery+bootstrap 实现一个ajax动态提交数据并修改页面

效果就是这样！

点击按钮弹出弹窗，然后提交数据后，返回修改页面

实现代码

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">提交表单</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <!-- 模态框主体 -->
      <div class="modal-body">
        <!-- 表单 -->
        <form id="myForm">
          <div class="form-group">
            <label for="inputData">输入数据</label>
            <input type="text" class="form-control" id="inputData" name="inputData" placeholder="输入数据">
          </div>
        </form>
      </div>
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="submitBtn">提交</button>
      </div>
    </div>
  </div>
</div>

<!-- 按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<!-- jQuery 和 Ajax 代码 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $(function() {
    // 在提交按钮被点击时发送 Ajax 请求
    $("#submitBtn").click(function() {
      $.ajax({
        url: "your_api_url",
        type: "POST",
        data: $("#myForm").serialize(),
        dataType: "json",
        success: function(response) {
          // 当请求成功时，更新输入框的值为返回的 JSON 数据中的 text 字段
          $("#inputData").val(response.text);
          // 关闭模态框
          $("#myModal").modal("hide");
        },
        error: function(xhr, status, error) {
          // 当请求失败时，修改输入框的值为 "抱歉"
          $("#inputData").val("抱歉");
        }
      });
    });
  });
</script>

在上述代码中，模态框中包含一个表单，其中包含一个输入框 #inputData，它将在成功或失败时被更新。

当打开模态框时，用户可以在输入框中输入数据，并单击提交按钮 #submitBtn 提交表单。

提交按钮单击事件上绑定了一个 Ajax 请求，在请求成功时更新输入框的值为返回的 JSON 数据中的 text 字段，并关闭模态框；

在请求失败时将输入框的值修改为 “抱歉”。注意替换 your_api_url 为您自己的实际值。