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

사용자가 보내기 버튼을 클릭하면 클릭 이벤트가 발생하고 데이터가 처리됩니다. 주로 두 개의 매개변수를 전달합니다. 하나는 사용자 이름이고 다른 하나는 콘텐츠입니다. 이 두 매개변수는 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 전달 매개변수는 동일하지만 차이점은 콜백 함수가 데이터를 처리하는 방식에 있습니다. 데이터가 xml 형식으로 전달되는 것을 PHP 코드에서 볼 수 있습니다.

jQuery는 html을 처리하는 것처럼 xml을 처리합니다. 속성 값이나 노드 값을 가져온 후 특정 처리를 수행하고 페이지로 돌아갈 수 있습니다.

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

jQuery의 get 메소드 사용 분석과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!