jQuery之get方法

url,[data],[callback],[type]
url:待載入頁面的URL地址。
data:待發送 Key/value 參數。
callback:載入成功時回調函數。
type:返回內容格式，xml, html, script, json, text, _default。

 

案例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='comment'>已有評論：</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='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";
?>

當用戶點擊send按鈕時，觸發click事件，對數據進行處理。主要傳入兩個參數，一個是用戶名，一個是內容。這兩個參數被傳遞到php頁面。PHP頁面處理完畢后，返回輸入數據，get方法處理返回的數據。分析代碼，可以看出，這數據，被寫入了resText這個div層中。整個過程頁面並沒有刷新。很安靜的處理了數據的傳輸。

 

案例二，以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='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
                        $("#resText").html(txtHtml); // 把返回的數據添加到頁面上
                    });
       })
    })
//]]>
</script>

 

PHP代碼：

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

jQuery傳遞參數是相同的，區別在於回調函數對數據處理的方式的不同。從PHP代碼中可以看出數據是以xml的格式傳入的。

jQuery處理xml就像處理html一樣，可以獲取屬性的值，也可以獲取節點的值，獲取這些值之后，就可以進行一定的處理，返回到頁面中去。