如何防止ajax請求重新加載頁面

Question

我有這個 ajax 代碼，它通過服務器端發布數據，但在上傳成功后重新加載。 我在下面附上了我的 html 代碼。 請在這里幫忙，謝謝

function UploadVid(){
    var file = $("#inputVideo")[0].files[0];
    var formData = new FormData();
    formData.append("file1", file);

    $.ajax({
        url: 'http://localhost:3000/upload-video',
        method: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        xhr: function () {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress",
                uploadProgressHandler,
                true
            );
            xhr.addEventListener("load", loadHandler, false);
            xhr.addEventListener("error", errorHandler, false);
            xhr.addEventListener("abort", abortHandler, false);
            console.log(xhr)
            return xhr;
        }
    });
}

//html code
 <div class="col-4 mt-2">
    <label class="col-12">Upload Video File</label>
    <button onclick="$('#inputVideo').trigger('click')"  class="btn btn-primary text-white">Upload</button>
    <input id="inputVideo" onchange="UploadVid(event)" accept="video/*" hidden class="d-none" type="file">
</div>

Answer 1

要解決此問題並提高代碼質量，請刪除內聯事件處理程序並使用不顯眼的方法將事件附加到包含按鈕的form元素。 從那里您可以在作為參數傳遞給您的處理函數的事件上調用preventDefault()以防止由表單提交引起的標准 HTTP 請求。

另外，正如@Christopher 所建議的，將type="button"添加到按鈕中，這樣當您單擊它以選擇要上傳的文件時，它就不會提交表單。

嘗試這個：

$('#yourForm').on('submit', e => {
  e.preventDefault();

  var file = $("#inputVideo")[0].files[0];
  var formData = new FormData();
  formData.append("file1", file);

  $.ajax({
    url: 'http://localhost:3000/upload-video',
    method: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    xhr: function() {
      var xhr = new window.XMLHttpRequest();
      xhr.upload.addEventListener("progress", uploadProgressHandler, true);
      xhr.addEventListener("load", loadHandler, false);
      xhr.addEventListener("error", errorHandler, false);
      xhr.addEventListener("abort", abortHandler, false);
      return xhr;
    }
  });
});

$('.upload-btn').on('click', () => {
  $('#inputVideo').trigger('click');
});

<div class="col-4 mt-2">
  <label class="col-12">Upload Video File</label>
  <button type="button" class="btn btn-primary text-white">Upload</button>
  <input type="file" id="inputVideo" hidden class="ulpoad-btn d-none" />
</div>