jQueryのgetメソッドの使用方法の分析

この記事の例では、jQuery での get メソッドの使用法について説明します。参考までに皆さんと共有してください。詳細は次のとおりです:

パラメータ: url、[data]、[callback]、[type]

ケース 1

フォームコード:

<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>

保留中の div コード:

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

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>

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>";
?>

ユーザーが送信ボタンをクリックすると、クリック イベントがトリガーされ、データが処理されます。主に 2 つのパラメータを渡します。1 つはユーザー名、もう 1 つはコンテンツです。これら 2 つのパラメータは php ページに渡されます。 PHP ページが処理された後、入力データが返され、get メソッドが返されたデータを処理します。コードを分析すると、このデータが resText div レイヤーに書き込まれていることがわかります。プロセス ページ全体は更新されません。データ転送は非常に静かに処理されました。

ケース2、XML形式でデータを処理する

フォームコードは上記と同じです。

処理対象のdivコードは上記と同じです。

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>

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 に渡すパラメーターは同じですが、違いはコールバック関数がデータを処理する方法にあります。 PHP コードから、データが XML 形式で渡されることがわかります。

jQuery は、HTML を処理するのと同じように XML を処理し、属性の値またはノードの値を取得した後、特定の処理を実行してページに戻ることができます。

この記事が jQuery プログラミングの皆様のお役に立てれば幸いです。

jQuery の get メソッドの使用分析に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。