jQuery get()的用法（附带实例）

$.get() 方法使用 get 方式异步请求数据，它的语法格式为：

$.get(url[,data][,callback][,type])

参数说明如下：

url：请求的 HTML 页面的 URL 地址；
data：可选参数，指定发送到服务器的数据；
callback：可选参数，规定当请求成功时调用的回调函数；
type：可选参数，预计的服务器响应的数据类型。

【实例】使用 $.get() 方法请求数据。
1) 创建 index.html 页面，构建表单。主要代码如下：

<form name="form" action="">
    用户名：<input type="text" id="username" /><br/><br/>
    内容：<textarea id="content"></textarea><br/><br/>
    <input type="button" id="button" value="提交"><br/><br/>
    <div id="responseText"></div>
</form>

2) 给按钮添加 click 事件，确定请求页面的URL，获取用户名与内容字段并将其作为参数传递到 index.php 页面，代码如下：

$("#button").on("click", function() {
    $.get("index.php", {username: $("#username").val(), content: $("#content").val()}, 回调函数, "json");
});

3) 如果服务器端成功返回数据，那么可以通过回调函数将返回的数据显示在页面中。其中回调函数有两个参数。代码格式如下：

function(data, status) {
    // data: 服务器端返回的数据，可以是 XML、JSON、HTML 文档等
    // status: 请求状态
});

4) 创建 index.php 文件，获取页面传递的数据，保存到 $dataArray 数组中，之后使用 json_encode() 方法将数组转换为 JSON 对象并返回。具体代码如下：

<?php
if(!empty($_GET['username']) && !empty($_GET['content'])) {
    $username = $_GET['username'];
    $content = $_GET['content'];
    $dataArray = array("username"=>$username,"content"=>$content);
    $jsonStr = json_encode($dataArray);
    echo $jsonStr;
?>

5) 由于服务器端返回的是 JSON 对象，因此需要对返回的数据进行处理。在以上代码中，将 $.get() 方法的第 4 个参数（type）设置为 json，表示服务器返回的数据格式为 JSON 格式，之后编写回调函数，将页面中 id 属性值为 responseText 的 <div> 元素内容设置为用户提交的用户名与留言内容。具体代码如下：

function(data, textStatus){
    // 显示用户提交的用户名与留言内容
    $("#responseText").html("用户名："+data.username+"<br/>留言内容："+data.content);
}

在页面中输入用户名与留言内容，之后单击“提交”按钮，运行效果如下图所示。

图 1 使用$.get()方法请求数据

jQuery get()的用法（附带实例）

相关文章