在jQuery中，我们可以使用$.get()方法来通过Ajax去请求服务器的数据。

语法：

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

说明：

$.get()方法有4个参数，如下表所示。

$.get()的4个参数
参数 说明
url 必选参数，表示被加载的页面地址
data 可选参数，表示发送到服务器的数据
fn 可选参数，表示请求成功后的回调函数
type 可选参数，表示服务器返回的内容格式

参数type返回的内容格式包括：text、html、xml、json、script或default。接下来给大家举一个例子，首先我们需要准备两个文件：一个是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(){
            $.get("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>

浏览器预览效果如下图所示。

分析：

我们在表单中输入内容，然后点击【提交】按钮后，就会将表单内容通过Ajax传给后端服务器，最后结果如下图所示。

在回调函数中，我们将返回来的data（也就是html片段）直接在HTML中使用。html片段实现起来只需要很少的工作量，但这种固定的数据结构并不一定能够在其他的页面得到重用，这一点我们要清楚。