Home / Questions / 36737
Accepted
PlayerWet
Asked: 2020-11-30 14:10:34 +0800 CST 2020-11-30 14:10:34 +0800 CST

如何取消ajax发送的请求？

  • 772

事实证明，我有一个将图像上传到服务器的功能，但有时需要的时间太长，我希望能够使用取消按钮取消所述功能。

$('#imageUploadForm').on('change',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));

用户如何通过单击停止它？

javascript

1 Answers

  1. Best Answer

    根据文档，您可以使用XMLHttpRequest.abort()方法中止请求。

    但是一旦发送，您并不能真正停止请求，也就是说，您所做的是在客户端停止但服务器上的过程继续进行。

    您应该向服务器发送单独的请求，以便它中断正在执行的操作，或者最好忽略响应。

    我给你留下了中止 Ajax 请求的代码，3 秒后按钮再次激活以进行新的提交。

    $(function() {
    
    var ajax = null; // iniciamos
    
    $('#imageUploadForm').on('change', (function(e) {
        
        // resto de código
        
        // pasamos el objeto 
        ajax = $.ajax({
            // código
        });
    }));   
    
    $('#cancel').on('click', function() {
        
        var $this = $(this);
        
        // Descomentar siguiente linea en tu projecto
        // Para evitar error read property 'abort' of null" 
        // if (ajax != null) {
            
            // desactivamos seleccionar archivo
            $('.sending').prop({ 'disabled': true });
            
            $this.text("Abortando envio...");
            
            setTimeout(function() {
                
                $this.text("Cancelar Envio");
                $('.sending').prop({ 'disabled': false });
                
            }, 3000);      
              
            ajax.abort();
            ajax = null;        
      
        // Descomentar siguiente linea en tu projecto
        //}
    });
});
    <form method="post" enctype="multipart/form-data">    
  <input class="sending" id="imageUploadForm" type="file">
  <input class="sending" type="submit">
</form>
<br>
<button class="sending" id="cancel">Cancelar Envio</button>  
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    • 4