Analyse de l'utilisation de la méthode get dans jQuery

L'exemple de cet article décrit l'utilisation de la méthode get dans jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Paramètres : url, [data], [callback], [type]

Cas 1

Code du formulaire :

<form id="form1" action="#">
<p>评论:</p>
 <p>姓名: <input type="text" name="username" id="username" /></p>
 <p>内容: <textarea name="content" id="content" rows="2" cols="20"></textarea></p>
 <p><input type="button" id="send" value="提交"/></p>
</form>

Code div en attente :

<div class=&#39;comment&#39;>已有评论：</div>
<div id="resText" >
</div>

Code jQuery :

<script type="text/javascript">
//<![CDATA[
 $(function(){
  $("#send").click(function(){
   $.get("get1.php", { 
      username : $("#username").val() , //传入参数
      content : $("#content").val() 
     }, function (data, textStatus){
      $("#resText").html(data); // 把返回的数据添加到页面上
     }
   );
  })
 })
//]]>
</script>

Code PHP :

<?php 
  header("Content-Type:text/html; charset=utf-8");
  echo "<div class=&#39;comment&#39;><h6>{$_REQUEST[&#39;username&#39;]}:</h6><p class=&#39;para&#39;>{$_REQUEST[&#39;content&#39;]}</p></div>";
?>

Lorsque l'utilisateur clique sur le bouton d'envoi, l'événement de clic est déclenché et les données sont traitées. Transmettez principalement deux paramètres, l’un est le nom d’utilisateur et l’autre est le contenu. Ces deux paramètres sont passés à la page php. Une fois la page PHP traitée, les données d'entrée sont renvoyées et la méthode get traite les données renvoyées. En analysant le code, nous pouvons voir que ces données sont écrites dans la couche div resText. La page entière du processus n’est pas actualisée. Le transfert de données s’est déroulé de manière très silencieuse.

Cas 2, traitement des données au format xml

Le code du formulaire est le même que ci-dessus.

Le code div à traiter est le même que ci-dessus.

Code jQuery :

<script type="text/javascript">
//<![CDATA[
 $(function(){
  $("#send").click(function(){
   $.get("get2.php", { 
      username : $("#username").val() , 
      content : $("#content").val() 
     }, function (data, textStatus){
      var username = $(data).find("comment").attr("username");
      var content = $(data).find("comment content").text();
      var txtHtml = "<div class=&#39;comment&#39;><h6>"+username+":</h6><p class=&#39;para&#39;>"+content+"</p></div>";
      $("#resText").html(txtHtml); // 把返回的数据添加到页面上
     });
  })
 })
//]]>
</script>

Code PHP :

<?php 
  header("Content-Type:text/xml; charset=utf-8");
  echo "<?xml version=&#39;1.0&#39; encoding=&#39;utf-8&#39;?>".
     "<comments>".
     "<comment username=&#39;{$_REQUEST[&#39;username&#39;] }&#39; >".
     "<content>{$_REQUEST[&#39;content&#39;]}</content>".
     "</comment>".
     "</comments>";
?>

jQuery transmettant les paramètres est le même, la différence réside dans la façon dont la fonction de rappel traite les données. Il ressort du code PHP que les données sont transmises au format XML.

jQuery traite le XML tout comme il traite le HTML. Il peut obtenir la valeur de l'attribut ou la valeur du nœud. Après avoir obtenu ces valeurs, il peut effectuer certains traitements et revenir à la page.

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

Pour plus d'articles liés à l'analyse de l'utilisation de la méthode get dans jQuery, veuillez faire attention au site Web PHP chinois !