How to include a load image (Loading), ajax execution

1

Code the following code that I use after making an "Onsubmit" in form:

function buscar(){
    resul = document.getElementById('resultado');
    bus=document.frmbusqueda.dato.value;
    tipo=document.frmbusqueda.tipo.value;
    ajax=nuevoAjax();
    ajax.open("POST", "busqueda.php",true);
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            resul.innerHTML = ajax.responseText
        }
    }
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    ajax.send("busqueda="+bus);

}

Everything works perfectly. What I need is that before I get the result, add a loading image, in the code.

Some suggestions and / or help.

Thanks

    
asked by Alexander Quiroz 13.11.2016 в 16:46
source

3 answers

5

Inside the function ajax of jquery there is the method beforeSend where you can show a div that contains this loader that you want to show

beforeSend: function() {
     $('#tu_loader').show();
},

And in the success you hide it.

Or you can also make up the call of the ajax the call to your div that contains the loader

$('#tu_loader').show();
//$.ajax({

And in the success you make the .hide()

    
answered by 13.11.2016 / 16:58
source
0

You can use:

beforeSend: function() {
    
answered by 13.11.2016 в 17:17
0

This solution causes it to show / hide the loading id linked to a div. In this case, whenever it is an ajax request or a normal load, it will be executed and you will not have to do code for each situation.

  

Requires jQuery

        jQuery(document).ajaxStart(function () {
            jQuery('#loading').show();
        });
        jQuery(document).ajaxStop(function () {
            jQuery('#loading').hide();
        });
    
answered by 25.10.2018 в 23:09