Comment faire une implémentation de requête asynchrone simple dans JQuery

Question

Y a-t-il un tutoriel simple pour quelque part?

Idéalement, je voudrais avoir une zone de texte et un bouton, et lorsque l'utilisateur clique sur le bouton, la zone de texte est envoyée au serveur, qui renvoie une valeur basée sur elle.

Le client remplit ensuite une autre zone de texte avec la valeur de retour, mais sans rafraîchir la page. Si c'est possible, montrer/cacher un gif de chargement serait génial aussi.

Je ne trouve pas de tutoriels simples pour savoir comment faire cela, quelqu'un peut-il me pointer dans la bonne direction?

Answer 1

Essayez googling pour jQuery + AJAX.

Il y a beaucoup d'exemples là-bas:

• http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
• http://visionmasterdesigns.com/tutorial-ajax-interface-menu-using-jqueryphp/
• http://www.ibm.com/developerworks/library/x-ajaxjquery.html
• http://viralpatel.net/blogs/2009/04/jquery-ajax-tutorial-example-ajax-jquery-development.html

Answer 2

méthode Ajax jQuery est votre ami: http://api.jquery.com/category/ajax

HTML

<form id="myForm" action="/echo/html/" method="post"> 
    <fieldset> 
     <textarea name="html" class="firstInput"></textarea> 
     <textarea class="secondInput"></textarea> 

     <input type="submit" value="GO!"> 
    </fieldset> 
</form> 

<img src="http://vinofordinner.com/art/loading.gif" id="loader" /> 

CSS

#loader { 
    display: none; 
} 

jQuery

$(function(){ 
    $('#myForm').submit(function(e){ 
     e.preventDefault(); 

     var $this = $(this), 
      data = $this.find('.firstInput').serialize(), 
      method = $this.attr('method'), 
      action = $this.attr('action'); 

     $.ajax({ 
      type: method, 
      url: action, 
      data: data, 
      beforeSend: function() { 
       $('#loader').show(); 
      }, 
      success: function(a){ 
       $('.firstInput').val(''); 
        $('.secondInput').val(a); 
      }, 
      complete: function() { 
       $('#loader').hide(); 
      } 
     }); 
    }) 

}) 

Exemple de travail:http://jsfiddle.net/G4uw6/

Answer 3

Vous le feriez comme ceci:

$.ajax({ 
    url: 'handlerscript.php', 
    type: 'POST', 
    data: {q: $('#theInput').val()}, 
    success: function(data) { 
     $('.result').html(data); 
     alert('Load was performed.'); 
    }, 
    beforeSend: function() { 
     $('.loadgif').show(); 
    }, 
    complete: function() { 
     $('.loadgif').hide(); 
    } 
}); 

Pour vous guider à travers la fonction, le premier paramètre url est réglé sur l'emplacement de la ressource que vous voulez obtenir une réponse de. Le paramètre type définit la méthode HTTP utilisé, il est le plus souvent définie sur GET (qui est la valeur par défaut) qui ajoute des données envoyées à l'URL ou POST qui ajoute toutes les données envoyées à l'en-tête de demande. data est un objet ou une chaîne contenant les données à envoyer à la page demandée, il peut être sous forme d'objet {param1: 'value1',param2: 'value2'} ou sous forme de chaîne codée par l'URL "param1=value1&param2=value2". La méthode success est appelée lorsqu'une réponse a été reçue du serveur qui a été réussie.La méthode beforeSend est appelée avant l'envoi de la demande et la méthode complete est appelée lorsqu'une réponse a été reçue du serveur indépendamment du succès de la demande.

Pour plus d'informations, consultez le Official jQuery API documentation of the jQuery.ajax() object