[Resolvido] ajax com jquery – enviando dados via ajax + gif de ca

[pulao 0]

boa noite tenho um codigo funcionando que envia variaveis atraves do ajax mas queria que durante o envio ocorra um sleep com uma gif animada e nao estou tento sucesso ao inserir. Segue o codigo ate o momento.

 

<script>
//jquery e ajax
$('#confirmar').click(function(){
					$.ajax({
			            type      : 'post',

			            url       : 'teste.php',

			            data      : 'assunto='+ $('#assunto').val() +'&duvida='+ $('#duvida').val(),

			            dataType  : 'html',

			            success : function(txt){

								$('body #resposta').html(txt);

			                }
			        });
				})

</script>

<table align="left">
  <tr>
     <td>Assunto: </td><td><input type="text" size="50" id="assunto" /></td>
  </tr>
  <tr>
     <td>Dúvida : </td><td><input type="text" size="60" id="duvida" /></td>
  </tr>
 <tr>
  <td><input type="button" value="Enviar" id="confirmar"></td>
 </tr>

 

 

pagina de teste que recebe os dados esta assim

<?php
$assunto = $_POST['assunto'];
$duvida = $_POST['duvida'];

sleep(2);
print 'deu certo, '.$assunto.'<br>'.$duvida.'';



?>

queria que durante o sleep aparecesse um gif de carregando, desde ja agradeço

[Rafael Fiori 2]

Usando os metodos ajaxStart e ajaxStop do jQuery é muito simples fazer isso, vamos lá...

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<table>
   <tr>
       <td>Assunto: </td><td><input type="text" size="50" id="assunto" /></td>
   </tr>
   <tr>
       <td>Dúvida : </td><td><input type="text" size="60" id="duvida" /></td>
   </tr>
   <tr>
       <td><input type="button" value="Enviar" id="confirmar"></td>
   </tr>
</table>
<div id="loading" style="position: fixed; height: 100px; width: 200px; background-color: #ccc; text-align: center; display: none; top: 10px; left: 10px">Loading...</div>
<div id="resposta"></div>
<script>
   //jquery e ajax
   $('#confirmar').click(function(){
       $.ajax({
           type      : 'post',
           url       : 'teste1.php',
           data      : {assunto:$('#assunto').val(), duvida: $('#duvida').val()},
           dataType  : 'html',
           success : function(txt){
               $('body #resposta').html(txt);
           }
       });
   }).ajaxStart(function(){
       $('#loading').toggle();
   }).ajaxStop(function(){
       $('#loading').toggle();
   })
</script>

 

Só precisa alterar o conteudo da div loading com o gif animado que você for utilizar, flw

[pulao 0]

resolvido

 

$('#confirmar').fadeIn('slow');  
				$('#confirmar').click(function(){
               $("#loader").fadeIn(); //coloquei para aparecer no inicio 
					$.ajax({
			            type      : 'post',

			            url       : 'teste.php',

			            data      : 'assunto='+ $('#assunto').val() +'&duvida='+ $('#duvida').val(),

			            dataType  : 'html',

			            success : function(txt){
 	  $("#loader").hide();//coloquei para sumir no final  
								$('body #resposta').html(txt);

			                }
			        });