Langage de programmation - JavaScript - Références des bibliothèques et cadres d'application - jQuery

ajax	jQuery
JavaScript	Version 1.0+

Syntaxe

jQuery.ajax( settings );	Version 1.0+
jQuery.ajax( url [, settings] );	Version 1.5+

Paramètres

Nom	Description
url	Ce paramètre permet d'indiquer l'URL a utiliser pour envoyé la requête AJAX.
settings	Ce paramètre permet d'indiquer les options a utiliser pour effectuer l'appel AJAX. Ces options sont une liste entre accolade («{», «}»), avec un nom de propriété, un deux-points «:» et une valeur à lui attribuer. Chacune des options sont séparés par une virgule. Voici la liste des options :
	Options	Description
	accepts	Cette option permet d'indiquer le type de contenu a envoyer en entête au serveur afin d'indiquer quel type de réponse il acceptera en retour.
	async	Cette option permet d'indiquer que tous les requêtes sont envoyés de façon désynchronisé. La valeur par défaut est «true».
	beforeSend(jqXHR, settings)	Cette option permet d'indiquer une fonction de rappel en arrière-plan pouvant être utilisé pour modifier l'objet jqXHR (en jQuery 1.4.x, XMLHTTPRequest) avant qu'il ne soit envoyé.
	cache	Cette option permet d'indiquer si la requête doit être caché par le navigateur.
	complete(jqXHR, textStatus)	Cette option permet d'indiquer une fonction à appeler lorsque la requête sera terminé (aussi bien dans le cas d'un succès que d'un échec).
	contents	Cette option permet de cartographier une paire de chaîne de caractères/expression régulière déterminant comment le jQuery va analyser la réponse, donne le type de contenu.
	contentType	Cette option permet d'indiquer le type de contenu à envoyer comme données au serveur.
	context	Cette option permet d'indiquer le contexte d'appel en arrière plan AJAX.
	converters	Cette option permet d'indiquer une carte de conversion d'un type de données vers un autre type de données.
	crossDomain	Cette option permet de forcer une demande de requête de crossDomain (comme JSONP) sur le même domaine.
	data	Cette option permet d'indiquer les données a être envoyé vers le serveur.
	dataFilter(data, type)	Cette option permet d'indiquer une fonction à utiliser pour le gestionnaire de réponse de données brutes de «XMLHttpRequest».
	dataType	Cette option permet d'indiquer le type de données à inspecter en arrière-plan par le serveur.
	error(jqXHR, textStatus, errorThrown)	Cette option permet d'indiquer une fonction à appeler si la requête échoue.
	global	Cette option permet d'indiquer un déclencheur de gestionnaire d'événements globale AJAX pour cette requête.
	headers	Cette option permet de cartographier une entête de paire de clef et de valeur à envoyer avec la requête.
	ifModified	Cette option permet d'indiquer que la requête ne doit être couronnée de succès que si la réponse a changé depuis la dernière demande.
	...	...

Description

Cette méthode permet d'effectuer une synchronisation d'une requête HTTP (AJAX).

Exemples

Voici un exemple montrant une utilisation de cette méthode avec un appel JSON :


							
								
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script language="JavaScript1.2" type="text/javascript">

jQuery(function($) {

  

  $("#monBouton").click(function(evenement) {

    evenement.preventDefault();

    jQuery.ajax({

       async : false,

      dataType : "json",

      url : "data.txt",

      success : function() { document.write('CECI EST UN RESULTAT'); }

    });

  });

  

});

</script>

</head>

<body>

  <input type="button" id="monBouton" value="Cliquer">

</body>

</html>

on obtiendra le résultat suivant :

Prenons pour acquis le code suivant en PHP «traiterform.php» affichant le résultat d'un formulaire avec une méthode «POST» :



<?php
print_r($_POST);
?>

L'exemple suivant permet de prendre tous les champs postés par le formulaire «MaForm» et de les envoyés à la page «traiterform.php», et d'ensuite les afficher dans la même page sans recharger celle-ci :

					

<!DOCTYPE html>

<html>

<head>

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

</head>

<body>

<form method="post" id="MaForm">

Prenom : <input type="text" name="prenom" id="prenom" value="" /><br />

Nom : <input type="text" name="nom" id="nom" value="" /><br />

<input type="submit" value="Envoyer" /><br />

</form>

<script>

jQuery(document).submit(function(e){

               var form = jQuery(e.target);

               if(form.is("#MaForm")){ 

                    e.preventDefault();

                    jQuery.ajax({

                         type: "POST",

                         url: "traiterform.php", 

                         data: form.serialize(), 

                         success: function(data) {

                              console.log(data); 

                              $('#output').html(data);

                         }

                    });

               }

          });

</script>

<div id="output"></div>

</body>

</html>

on obtiendra le résultat semblable suivant :

Voir également

Langage de programmation - JavaScript - «AJAX»

Dernière mise à jour : Mercredi, le 28 octobre 2015

Section courante

A propos

Section administrative du site

ajax

Syntaxe

Paramètres

Description

Exemples

Voir également