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 爲您自己的實際值。