jQuery - Introduction et méthodes AJAX

jQuery - Introduction à AJAX

Qu'est-ce qu'AJAX ?

AJAX = JavaScript et XML asynchrones.

En bref, AJAX charge les données en arrière-plan et les affiche sur la page Web sans recharger la page Web entière.

À propos de jQuery et d'AJAX

jQuery fournit plusieurs méthodes liées à AJAX.

Avec les méthodes jQuery AJAX, vous pouvez demander du texte, HTML, XML ou JSON à partir d'un serveur distant à l'aide de HTTP Get et HTTP Post - et vous pouvez charger ces données externes directement dans les éléments sélectionnés de la page Web.

La programmation AJAX est encore un peu difficile sans jQuery.

Écrire du code AJAX standard n'est pas facile car différents navigateurs implémentent AJAX différemment. Cela signifie que vous devez écrire du code supplémentaire pour tester le navigateur. Cependant, l'équipe jQuery a résolu ce problème pour nous. Nous n'avons besoin que d'une simple ligne de code pour implémenter la fonction AJAX.

Méthode AJAX load()

La méthode jquery load() est l'une des méthodes non actualisées dans jquery ajax. Elle peut implémenter directement. Le contenu de la page chargée est placé dans l'ID spécifié, ou la page peut être actualisée avec des paramètres. Laissez-moi vous présenter quelques problèmes d'utilisation et courants de load().

Syntaxe :

$(selector).load(URL,data,callback);

Le paramètre URL obligatoire spécifie l'URL que vous souhaitez charger.

Le paramètre facultatif data spécifie l'ensemble de paires clé/valeur de chaîne de requête à envoyer avec la requête.

Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois la méthode load() terminée.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=" 
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("");});
});
</script>
</head>
<body>
<div id="div1">
<h2>使用 jQuery AJAX 修改文本内容</h2>
</div>
<button>获取外部内容</button>
</body>
</html>

Vous pouvez également ajouter des sélecteurs jQuery aux paramètres d'URL.

L'exemple suivant charge le contenu de l'élément avec id="p1" dans le fichier "demo_test.txt" dans l'élément <div> spécifié

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt #p1");
  });
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>
<button>获取外部文本</button>
</body>
</html>

Spécification du paramètre de rappel facultatif Le rappel fonction à autoriser lorsque la méthode load() se termine. La fonction de rappel peut définir différents paramètres :

responseTxt - Contient le contenu du résultat lorsque l'appel est réussi

statusTXT - Contient l'état de l'appel xhr - Contient le

XMLHttpRequest objet.

Les méthodes AJAX get() et post()

Les méthodes jQuery get() et post() sont utilisées pour demander à l'objet serveur via les données de requête HTTP GET ou POST.

Requête HTTP : GET vs. POST

Deux méthodes courantes de requête-réponse côté client et côté serveur sont : GET et POST.

GET - Demander des données à la ressource spécifiée POST - Soumettre les données à traiter à la ressource spécifiée

GET est essentiellement utilisé pour obtenir (récupérer) des données du serveur. Remarque : La méthode GET peut renvoyer des données mises en cache.

POST peut également être utilisé pour obtenir des données du serveur. Cependant, la méthode POST ne met pas en cache les données et est souvent utilisée pour envoyer des données avec la requête.

Méthode jQuery $.get()

La méthode $.get() demande des données au serveur via une requête HTTP GET.

Syntaxe :

$.get(URL,callback);

Les paramètres d'URL requis précisent l'URL que vous souhaitez demander.

Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois la requête réussie.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>
</html>

Le premier argument de $.get() est l'URL que nous souhaitons demander ("demo_test.php").

Le deuxième paramètre est la fonction de rappel. Le premier paramètre de rappel stocke le contenu de la page demandée et le deuxième paramètre de rappel stocke l'état de la demande.

Astuce : Ce fichier PHP ("demo_test.php") est similaire à ceci :

<?php
echo 'Il s'agit de données lues à partir du fichier PHP. ';
?>

Méthode jQuery $.post()

Requêtes de méthode $.post() du serveur via requête HTTP POST données.

Syntaxe :

$.post(URL,data,callback);

Les paramètres d'URL requis précisent l'URL que vous souhaitez demander.

Le paramètre facultatif data spécifie les données à envoyer avec la requête.

Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois la requête réussie.

L'exemple suivant utilise $.post() pour envoyer des données avec la requête :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"php中文网",
url:"http://www.php.cn"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>

Le premier paramètre de $.post() est l'URL que nous souhaitons demander ("demo_test_post. php" ).

Ensuite, nous envoyons les données avec la demande (nom et ville).

Le script PHP dans "demo_test_post.php" lit ces paramètres, les traite et renvoie les résultats.

Le troisième paramètre est la fonction de rappel. Le premier paramètre de rappel stocke le contenu de la page demandée, tandis que le deuxième paramètre stocke l'état de la demande.

Astuce : Ce fichier PHP ("demo_test_post.php") ressemble à ceci :

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$city;
?>


Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $.post("/try/ajax/demo_test_post.php",{ name:"php中文网", url:"http://www.php.cn" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); }); }); </script> </head> <body> <button>发送一个 HTTP POST 请求页面并获取返回内容</button> </body> </html>
soumettreRéinitialiser le code
  • Recommandations de cours
  • Téléchargement du didacticiel