Trouve la longueur du premier segment d'une chaîne contenant tous les caractères d'un masque donnée
La méthode ajax() est la méthode la plus utilisée en jQuery, elle sert à exécuter une requête AJAX (HTTP asynchrone)
La méthode ajax() est utilisée pour exécuter une requête AJAX (HTTP
asynchrone).
Cette fonction est sans doute celle que l'on utilise le plus
avec jQuery.
Toutes les méthodes de jQuery AJAX utilisent la méthode ajax(). Cette
méthode est principalement utilisée pour les requêtes où les autres
méthodes ne peuvent pas être utilisés.
Syntaxe
$.ajax({nom/valeur, nom/valeur, ... })
Les paramètres spécifie un ou plusieurs des paires nom/valeur de la
requête AJAX.
Vous trouvez les noms et valeurs possibles dans le tableau ci-dessous :
| Nom | Valeur/Description |
|---|---|
| async | Une valeur booléenne qui indique si la demande devrait être gérée asynchrone ou non. Valeur par défaut est true |
| beforeSend(xhr) | Une fonction à exécuter avant d'envoyer la demande(la requête). Fonction appelée avant la requête. |
| cache | Une valeur Booléen indiquant si le navigateur doit mettre en cache les pages demandées. Valeur par défaut est true |
| complete(xhr,status) | Une fonction à exécuter lorsque la demande est terminée, peu importe le succès ou non. |
| contentType | Le type de contenu utilisé lors de l'envoi de données vers le serveur. Valeur par défaut est: « application/x-www-form-urlencoded » |
| context | Spécifie la valeur de « this » pour toutes les fonctions de rappel AJAX liées |
| data | Spécifie les données à envoyer au serveur . Données envoyées en GET. |
| dataFilter(data,type) | Fonction utilisée pour gérer les données de réponse brut du XMLHttpRequest |
| dataType |
Le type de données attendu de la réponse du serveur.
|
| error(xhr,status,error) | Une fonction à exécuter si la demande échoue (c'est-à-dire une Fonction appelée en cas d’erreur ). |
| Global | Une valeur booléenne spécifiant ou non l'utilisation automatique des déclencheurs d’événements (vqleur par défaut est true). |
| ifModified | Autorise la réponse si et seulement si la réponse a changé depuis la dernière requête (false par défaut). |
| jsonp | Une chaîne de substitution de la fonction de rappel dans une requête jsonp |
| jsonpCallback | Spécifie un nom pour la fonction de rappel dans une requête jsonp |
| password | Spécifie un mot de passe à utiliser dans une requête HTTP d'authentification des accès. |
| processData | Une valeur booléenne spécifiant si les données envoyées avec la demande devrait être transformée en une chaîne de requête. Valeur par défaut est true Option à passer en false si vous souhaitez envoyer des DOMDocuments |
| scriptCharset | Spécifie le jeu de caractères de la demande |
| success(result,status,xhr) | Une fonction à exécuter lorsque la demande réussit |
| timeout |
Redéfini le temps de réponse maximum.
Le délai d'attente locale (en millisecondes) pour la requête |
| traditional | Une valeur booléenne spécifiant ou non d'utiliser le style traditionnel de la sérialisation de param |
| type | Le type de requête POST ou GET (GET par défaut). |
| url | Spécifie l'URL pour envoyer la demande. Valeur par défaut est la page en cours |
| username | Spécifie un nom d'utilisateur à utiliser dans une requête HTTP d'authentification des accès |
| xhr | Fonction utilisée pour la création de l'objet XMLHttpRequest |
Lors de l'utilisation de la méthode .Ajax() on aura à déterminez les
trois paramètres de base :
la méthode utilisée (POST ou GET), l’URL de la page appelée et
l’action à effectuer comme suit:
Code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery AJAX la méthode ajax()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body style="text-align:center;">
<h1 style="color:green">www.oujood.com</h1>
<h2>jQuery la méthode ajax()</h2>
<script>
$(document).ready(function(){
$.ajax({
type: "POST",
url: "test1.txt",
success:
function(retour){
alert("Données retournées : " + retour );
}
});
});
</script>
</body>
</html>
Dans l'exemple suivant, lorsque vous cliquez sur le lien qui a la classe CSS "teste", le code HTML de la page liée à ce lien s’affiche dans la balise qui a l’id "content".
Code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery AJAX la méthode ajax()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body style="text-align:center;">
<h1 style="color:green">www.oujood.com</h1>
<h2>jQuery la méthode ajax()</h2>
<a href="test1.txt" class="teste">cliquer ici</a>
<p id="content"></p>
<script>
$(document).ready(function(){
$("a.teste").click(function() {
$.ajax({
type: "POST",
url: $(this).attr("href"),
success: function(retour){
$("#content").empty().append(retour);
}
});
return false;
});
});
</script>
</body>
</html>
Voici le cde de la page test.php
<?php $name = htmlspecialchars($_POST["name"]); $comment = htmlspecialchars($_POST["comment"]); echo "Bonjour, $name.
Votre commentaire a été reçu avec succès." . "<br>"; echo "Voici le commentaire que vous avez écrit : $comment"; ?>
Et le code de notre page qui contient le formulaire, dans notre cas les deux pages se trouve dans le même dossier:
Code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery AJAX la méthode ajax()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body style="text-align:center;">
<h1 style="color:green">www.oujood.com</h1>
<h2>jQuery la méthode ajax()</h2>
<form class="test" action="test1.php">
<label>Nom: <input type="text" name="name"></label>
<label>Commentaire: <textarea cols="50" name="comment"></textarea></label>
<input type="submit" value="Send">
</form>
<p id="content" style="border:solid 1px #000"></p>
<script>
$(document).ready(function(){
$("form.test").submit(function() {
s = $("form.test").serialize();
$.ajax({
type: "POST",
data: s,
url: $(this).attr("action"),
success: function(retour){
$("#content").empty().append(retour);
}
});
return false;
});
});
</script>
</body>
</html>
Note: pour un formulaire, il faut le sérialiser comme le montre la seconde linge du code – cad récupérer tous les valeurs du formulaire – et passer ses données dans le paramètre data.
Voir La méthode serialize() pour en savoir plus
Voir aussi notre tutoriel Manipulation des Formulaires en PHP
Dans cet exemple nous allons remplacer le contenu de l’élément div par
le contenu d’un fichier texte.
Pour cela créez un fichier texte que vous placez sur votre serveur
(local ou distant) , mettez y ce que vous voulez comme texte, nommez ce
fichier « test.txt »
Puis et toujours sur votre serveur créez un fichier HTML nommez le
« test.html » et mettez y le code suivant :
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery demo </title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").load('test.txt');
});
});
</script>
</head>
<body>
<div><h2>Laissez AJAX changer ce
texte</h2></div>
<button>Changer le Contenu</button>
</body>
</html>