使用純 javascript 和引導程序：如何顯示模式對話框確認來自 JSON API 的提取操作的響應

Question

是否可以在獲取請求成功或獲取請求失敗后使用引導程序和純 javascript 顯示模式對話框？

表單提交

/**
 * Event handler for form submission
 */
const formUpload = document.querySelector("#upload-form");

document
  .querySelector("#upload-form")
  .addEventListener("submit", async (event) => {
    console.log("FORM SUBMIT HANDLER");

    event.preventDefault();

    let txtArea = document.querySelector("#file-contents");

    const response = await sendJSON(txtArea.textContent);

    // how do I diplsay a modal bootstrap dialog here confirming success
    // or error message from json api request
    console.log(response);
  });

HTML 表格

<div class="container">        
  <form action="/upload" id="upload-form" enctype="multipart/form-data" method="POST">
    <div class="form-group">   
      <h1>Upload</h1>          
      <p>Use this form to upload a json file to the API.</p>
    </div>
    <div class="form-row">     
      <div class="form-group"> 
        <label for="file-input">JSON file</label>
        <input type="file" accept=".json" class="form-control-file" id="file-input" name="file-input" />
      </div>
    </div>
    <div class="form-row">     
      <pre id="file-contents" name="file-contents"></pre>
    </div>
    <button id="clear-button" type="reset" class="btn btn-primary" disabled="true">Clear</button>
    <button id="submit-button" type="submit" data-toggle="modal" data-target="#confirm-submit" class="btn btn-primary"
      disabled="true">Submit</button>
  </form>
</div>
      
<script src="/static/js/script.js"></script>

Answer 1

您可能想在請求回調中使用它：

// Optional success message inside div.modal-content
$('.modal-content').text('My success or error message')

// open/close modal 
$('#myModal').modal('toggle')

以下是引導模式的示例：

<div id="myModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">

    <div class="modal-content"> 
      <!-- Div you want to update the content -->
      ...
    </div>

  </div>
</div>

您可以在此處查看有關使用 javascript 的引導模式的更多信息