Analysis on usage of get method in jQuery

The example in this article describes the usage of the get method in jQuery. Share it with everyone for your reference, the details are as follows:

Parameters: url,[data],[callback],[type]

Case 1

Form code:

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

To be processed div code:

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

jQuery code:

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

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

When the user clicks send When the button is pressed, the click event is triggered and the data is processed. Mainly pass in two parameters, one is the user name and the other is the content. These two parameters are passed to the php page. After the PHP page is processed, the input data is returned, and the get method processes the returned data. Analyzing the code, we can see that this data is written into the resText div layer. The entire process page is not refreshed. The data transfer was handled very quietly.

Case 2, processing data in xml format

The form code is the same as above.

The div code to be processed is the same as above.

jQuery code:

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

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

The parameters passed by jQuery are the same, the difference lies in the way the callback function processes the data. It can be seen from the PHP code that the data is passed in in xml format.

jQuery handles xml just like it handles html. It can get the value of the attribute or the value of the node. After getting these values, it can perform certain processing and return to the page.

I hope this article will be helpful to everyone in jQuery programming.

For more articles related to analysis of get method usage in jQuery, please pay attention to the PHP Chinese website!