Maison > Article > interface Web > Explication détaillée des exemples de méthodes load() et post() d'ajax dans jQuery_jquery

Explication détaillée des exemples de méthodes load() et post() d'ajax dans jQuery_jquery

WBOYoriginal: 2016-05-16 15:21:431645parcourir

L'exemple de cet article décrit les méthodes load() et post() d'ajax dans jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1. Méthode load()

La méthode load() de jQuery ajax peut charger le code du fichier HTML distant et l'insérer dans le DOM. C'est encore un peu différent de post et get, mais elle peut rapidement charger le code HTML d'une page et l'enregistrer dans. DOM et exécutable.

La méthode load() utilise la méthode GET par défaut. Si le paramètre data est passé, la méthode Post est utilisée.

Convertir automatiquement en mode POST lors du passage de paramètres supplémentaires. Dans jQuery 1.2, vous pouvez spécifier un sélecteur pour filtrer le document HTML chargé, et seul le code HTML filtré sera inséré dans le DOM. La syntaxe est du type "url #some > selector", le sélecteur par défaut est "body>*".

Explication :

load est la fonction Ajax la plus simple, mais son utilisation a des limites :

1. Il est principalement utilisé pour les interfaces Ajax qui renvoient directement du HTML
2. Load est une méthode wrapper jQuery qui doit être appelée sur le wrapper jQuery et chargera le HTML renvoyé dans l'objet Même si une fonction de rappel est définie, il est indéniable que l'interface de chargement est intelligemment conçue et simple à utiliser. Voici un exemple : Démontrer l'utilisation de l'interface Load :

Fonction Load() :

Introduction à la fonction : load(url, [data], [callback]) Valeur de retour : jQuery

Description du paramètre :

url : URL de la page web HTML à charger.
data : (paramètre facultatif) données clé/valeur envoyées au serveur.
callback : (paramètre facultatif) fonction de rappel lorsque le chargement est réussi.

Un exemple de démonstration est donné ci-dessous :

Créez d'abord le fichier test.html qui doit être chargé :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax演示</title>
</head>
<body>
脚本之家(www.jb51.net),提供大量脚本及素材供大家下载!
</body>
</html>

Créez ensuite le fichier ajax.html et n'oubliez pas d'introduire jquery.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#btn").click(function(){
  $("#result").load("test.html",function(responseText,textStatus){
  $("#display").append("<hr>responseText:"+responseText);
  $("#display").append("<hr>textStatus:"+textStatus);
  }); 
 });
 });
</script>
</head>
<body>
<input type="button" value="测试" id="btn" />
<h2>显示的内容如下：</h2>
<div id="result"></div>
<h2>结果：</h2>
<div id="display"></div>
</body>
</html>

L'exemple ci-dessus montre comment utiliser la méthode Load.

Conseils :

① Nous devons toujours faire attention à la mise en cache du navigateur. Lors de l'utilisation de la méthode GET, nous devons ajouter le paramètre timestamp (net Date()).getTime() pour garantir que l'URL envoyée est différente à chaque fois afin d'éviter la mise en cache du navigateur.

② Lorsqu'un espace est ajouté après le paramètre url, tel que " ", une erreur "symbole non reconnu" apparaîtra et la requête peut toujours être envoyée normalement. Cependant, le HTML ne peut pas être chargé dans le DOM. est résolu après l'avoir supprimé.

2. Méthode post()

Ajax dans jquery a deux modes d'envoi de données, l'un est get(), qui a été mentionné dans l'article précédent, et l'autre est post(). Laissez-moi vous le présenter à nouveau. Les amis qui ont besoin d'en savoir plus peuvent s'y référer.

Tout d'abord, vous devez connaître jQuery.post(url, [data], [callback], [type])

Décrivez les paramètres :

url : Envoyer l'adresse de la demande.
data : Paramètres clé/valeur à envoyer.
callback : fonction de rappel lors d'un envoi réussi.
type : format de contenu de retour, xml, html, script, json, texte, _default.

Description :

Charger les informations via une requête HTTP POST à distance.

Il s'agit d'une simple fonction de requête POST pour remplacer le complexe $.ajax. La fonction de rappel peut être appelée lorsque la demande aboutit. Si vous devez exécuter une fonction en cas d'erreur, utilisez $.ajax.

Regardons d'abord un exemple simple

Copier le code Le code est le suivant :

48ac9bbe5000e64480db93b2327589d3 $_POST[ 'nom']));?>

Créez ensuite le fichier ajax.html, faites attention au code js :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#sub").click(function(){
  $.post("testPost.php",{name:$("#name").val()},function(data,textStatus){
  $("#result").append("data:"+data.name);
  $("#result").append("<br>textStatus:"+textStatus);
  },"json");
  return false;
 });
 });
</script>
</head>
<body>
<form action="testPost.php" method="post">
 <input type="text" name="name" id="name" >
 <input type="submit" id="sub" value="提交">
</form>
<h2>显示的内容如下：</h2>
<div id="result"></div>
</body>
</html>

Utilisation 2 : (Cliquez sur les données de publication pour renvoyer les données)

<input type="button" id="bnajax" value="ajax" onclick="ajaxTest()" />
<script type="text/javascript" >
 function ajaxTest()
 {
 $.post("http://localhost:8012/t.asp", { "txt": "123" },function(data)
 {
  $("#divMsg").html(data);
 }
 );
 }
</script>

Exemple 3

Code JS :

<script>
$(document).ready(function(){
  $(".ajax_btn").click(function(){
   $.post("ajax.php",//异步处理动态页面
   {name:$(".name").val()},//获取类名为"name"文本的值，以NAME异步传值
   function(data){//data为反回值，function进行反回值处理
     $(".content").val(data);//获得得反回值后，将其填入到类名为"content"的文本框中
   });
  })
})
</script>

Code ajax.php :

<&#63;php
$name=$_POST["name"];
if($name=="netxu"){
  echo "对不起，".$name."数据存在";
}
else{
  echo "恭喜你，".$name."可以使用";
}
&#63;>

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：4 méthodes JavaScript pour implémenter des compétences simples de commutation d'onglets_javascriptArticle suivant：4 méthodes JavaScript pour implémenter des compétences simples de commutation d'onglets_javascript

Articles Liés

Voir plus