jQuery $.post()方法的用法

在 jQuery 中，除了 $.get() 方法，我們還可以使用 $.post() 方法來通過 Ajax 向伺服器請求獲取資料。

$.get() 方法和 $.post() 方法在使用方式上差不多，不過兩者還是有一定的區別：

get 方式不適合較大的資料量，並且它的請求資訊會儲存在瀏覽器快取中，因此安全性不好；
post 方式不存在上述的不足。

語法：

$.post(url, data, fn, type)

$.post() 方法有 4 個引數，如表 1 所示。

表 1：$.post() 方法的 4 個引數
引數	說明
url	必選引數，表示被載入的頁面地址
data	可選引數，表示傳送到伺服器的資料
fn	可選引數，表示請求成功後的回撥函數
type	可選引數，表示伺服器返回的內容格式

接下來舉一個例子，首先我們需要準備兩個檔案：一個是擴充套件名為 php 的檔案，另一個是擴充套件名為 html 的檔案。

擴充套件名為 php 的檔案程式碼如下：

<?php 
    header("Content-Type:text/html; charset=utf-8");
    echo "<div class='item'><h4>{$_REQUEST['username']}:</h4><p>{$_REQUEST['content']}</p></div>";
?>

擴充套件名為 html 的檔案程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        .item h4{margin:5px;background-color:#F1F1F1;}
        .item p{margin:0;text-indent:2em;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
    $(function(){
       $("#send").click(function(){
            $.post("get.php", { 
                        username : $("#name").val() , 
                        content : $("#content").val()  
                    }, function (data, textStatus){
                        $("#comment").html(data); // 把返回的資料新增到頁面上
                    }
            );
       })
    })
</script>
</head>
<body>
    <form>
        <fieldset>
            <legend>小夥伴們，快快到碗裡來！</legend>
            <p><label>暱稱: <input id="name" type="text" /></label></p>
            <p><label>內容: <textarea name="content" id="content"  rows="4" cols="30"></textarea></label></label></p>
            <p><input id="send" type="button" value="提交" /></p>
        </fieldset>
    </form>
    <h3>已有評論：</h3>
    <div id="comment" ></div>
</body>
</html>

預覽效果如圖 1 所示。

圖 1：預設效果