2

Tenho o seguinte código em JavaScript para postar os dados do formulário no MySql. Porém, preciso que exiba a uma mensagem de "carregando..." antes de concluir o envio, pois utilizo para postar fotos e demora um pouco.

<script type="text/javascript">

$(function(){

    $('#feed_msg').submit(function(event){
        event.preventDefault();
        var formDados = new FormData($(this)[0]);

        $.ajax({
            url:'post-msg-grupo.php',
            type:'POST',
            data:formDados,
            cache:false,
            contentType:false,
            processData:false,
            success:function (data)
     {document.getElementById('msginf').innerHTML = 'Parabéns! Sua mensagem foi enviada com sucesso!';
              $('#feed_msg').each (function(){
            this.reset();
           });
      },
            dataType:'html'
        });
        return false;
    });
});

</script>
6
  • 1
    antes de executar o ajax é só exibir a mensagem... pode ser exibindo um div, ou um simples document.write("carregando..."); 26/04/2019 às 15:03
  • @RicardoPontual Sou leigo, onde coloco este código no script que postei?
    – Gladison
    26/04/2019 às 15:06
  • @RicardoPontual Tentei mas não funcionou.
    – Gladison
    26/04/2019 às 15:09
  • pode ser dentro da função de sumit em qualquer lugar antes do $.ajax, antes da linha event.preventDefault(); por exemeplo 26/04/2019 às 15:09
  • @RicardoPontual Deu erro, ele abre uma nova aba no navegador e aparece "carregando..". O corretoé aparecer dentro de 'msginf'
    – Gladison
    26/04/2019 às 15:11

2 Respostas 2

2

Coloque a mensagem antes do AJAX ($.ajax({...})) com o mesmo innerHTML, mas você pode usar o jQuery pra isso:

$(function(){

    $('#feed_msg').submit(function(event){
        event.preventDefault();
        var formDados = new FormData($(this)[0]);

         $('#msginf').html('Carregando...');

        $.ajax({
            url:'post-msg-grupo.php',
            type:'POST',
            data:formDados,
            cache:false,
            contentType:false,
            processData:false,
            success:function (data){
               $('#msginf').html('Parabéns! Sua mensagem foi enviada com sucesso!');
              $('#feed_msg').each (function(){
            this.reset();
           });
      },
            dataType:'html'
        });
        return false;
    });
});

Quando o AJAX entrar no success, irá substituir o conteúdo do elemento #msginf pela mensagem de "sucesso".

2

Indente melhor seu código para o entendimento de todos quando for realizar perguntas, facilita a compreensão daqueles que querem te ajudar. Agora respondendo sua pergunta, dentro do método $.ajax, você pode passar uma propriedade dentro deste objeto que você criou chamada beforeSend, nesta propriedade você cria uma função inline ou chama alguma função de sua preferência, está função irá ser executada antes da requisição ser enviada, então você poderia fazer isso :

 $.ajax({ 
      ... //suas outras propriedades
     beforeSend: function() {
         $(".divprincipal").append("<div class='loader'></div>");
     }
     sucess: function(dados) {
        $(".loader").remove();
        //colocar os dados na tela
     }
    });

O código acima coloca uma div com a classe "loader" dentro de outra div, e quando a requisição for processada com sucesso (sucess:) você remove ela. Espero ter ajudado :)

Documentação do método $.ajax aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .