Ajax

Ajax

by Angelo Rogério Rubin

HTML

<button class="btn btn-primary" id="ajax">Clique aqui</button>
<div class="msg-col-dados">Coletando os dados...</div>
<div class="msg-prep-dados">Preparando os dados...</div>
<div class="msg-success alert alert-success" role="alert">Enviado com sucesso.</div>
<div class="loading">
    <img src="https://www.cathaybk.com.tw/cathaybk/vip/event/2014/201408Fund/img/status.gif">
</div>

CSS

.loading img {
    width: 150px;
}

JavaScript

$('.loading, .msg-col-dados, .msg-prep-dados, .msg-success').hide();
$('#ajax').on('click', function(){
    $('.msg-success').hide();
    $.ajax({
        url : '/echo/json/',
        type: "POST",
        dataType: "json",
        data: {
            json: JSON.stringify({
                text: 'some text',
                array: [1, 2, 'three'],
                object: {
                    par1: 'another text',
                    par2: [3, 2, 'one'],
                    par3: {}
                }
            }),
            delay: 6
        },
        beforeSend: function(){
            $('.loading, .msg-col-dados, .msg-prep-dados').show();
        },
        success:function(data){
            $('.loading, .msg-col-dados, .msg-prep-dados').hide();
            $('.msg-success').show();
            console.log(data);
        }
        
    });
});