如何取消ajax請求並在運行時清除信息？

Question

這是我的代碼片段。 默認情況下，“ ajax_info_box”是隱藏的，通過單擊“按鈕”，“ ajax_info_box”將顯示並發送請求，大概需要5秒鍾的時間。 如何通過單擊“取消”取消和清除請求？任何幫助將不勝感激。

   $('.ajax_info_box').hide()
   $('.button').click(function() {
   $('.ajax_info_box').show()
    var xhr =  $.ajax({
        type: "POST",
        url: 
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
          do something here

    });
    $('.cancel').click(function () {
       suppose to kill the request here
       $('.ajax_info_box').hide()
    }); 
});

Answer 1

xhr上面有一個中止方法

xhr.abort()

此處更多內容使用jQuery中止Ajax請求

Answer 2

   $('.ajax_info_box').hide()
   $('.button').click(function() {
   $('.ajax_info_box').show()
    var xhr =  $.ajax({
        type: "POST",
        url: 
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
          do something here

    });
    $('.cancel').click(function () {
       xhr.abort();
       $('.ajax_info_box').hide()
    }); 
});