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

How can I cancel a request sent by ajax?

  • 772

It turns out that I have a function that uploads an image to the server, but sometimes it takes too long and I would like to be able to cancel said function using a cancel button.

$('#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);
            }
        });
    }));

How could the user stop it with a click?

javascript

1 Answers

  1. Best Answer

    According to the documentation you can use the XMLHttpRequest.abort() method to abort the request.

    But once sent, you can't really stop the request, that is, what you do is stop on the client side but the process on the server continues.

    You should either send a separate request to the server, so that it interrupts what it is doing, or it would be better to simply ignore the response.

    I leave you the code to abort the Ajax request and after 3 seconds the buttons are activated again for a new submission.

    $(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