$.getJSON 是 jQuery 提供的一种 AJAX 方法,用于向服务器请求 JSON 数据并在数据加载成功后执行回调函数。这个方法特别适用于跨域请求,因为 JSONP(JSON with Padding)协议允许绕过同源策略,使得 JavaScript 可以从不同源的服务器获取数据。
在 jQuery 中,$.getJSON 的基本语法如下:
```javascript
jQuery.getJSON( url, [data], [callback] )
```
- `url`: 发送请求的服务器地址。
- `[data]`: 可选参数,一个键值对对象,这些数据将被发送到服务器。
- `[callback]`: 可选参数,一个函数,当请求成功且数据被解析为 JSON 对象时会被调用。回调函数中的参数 `response` 即为服务器返回的 JSON 数据对象。
例如,以下是一个简单的使用 $.getJSON 进行跨域请求的例子:
服务器端(如 PHP):
```php
// 假设这是服务器返回的 PHP 文件,返回 JSON 数据
$arr = array("name" => "zhangsan", "age" => 20);
$jarr = json_encode($arr);
echo $jarr;
```
客户端(JavaScript):
```html
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
function getJsonData() {
$.getJSON("http://yourserver.com/yourfile.php", function(response) {
console.log(response.name); // 输出 "zhangsan"
console.log(response.age); // 输出 20
});
}
</script>
<input type="button" value="获取数据" onclick="getJsonData()" />
```
在这个例子中,服务器端的 PHP 脚本将一个 PHP 数组转换为 JSON 格式并直接 `echo` 出来,而客户端的 JavaScript 通过 $.getJSON 调用这个 URL,当数据返回时,回调函数会接收到一个 JSON 对象,并能通过 `.name` 和 `.age` 访问返回的数据。
在更复杂的场景中,例如预约登记接口,$.getJSON 通常会用来发送和接收复杂的数据。例如,PHP 接口可能需要接收前端传递的参数,如用户姓名、电话和地址,然后处理这些数据并返回结果。在 PHP 代码中,会检查这些参数是否为空,如果符合要求则将数据插入数据库,并在响应中返回一个包含状态码的 JSON 对象。前端的 JavaScript 部分则会根据返回的状态码进行相应的操作,如显示成功消息或错误提示。
```javascript
$(document).ready(function() {
var name = "name";
var phone = "phone";
var addr = "addr";
// 发送包含参数的请求
$.getJSON("http://请求网站地址/data.php", {
ac: "yuyue_interface",
name: name,
phone: phone,
addr: addr
}, function(response) {
if (response.code === 0) {
alert("预约成功!");
} else {
alert("预约失败,原因:" + response.code);
}
});
});
```
在这个例子中,前端通过 $.getJSON 发送一个包含特定参数(如 `ac` 表示接口名,其他参数如 `name`、`phone`、`addr` 用于传递预约信息)的请求。服务器根据接收到的参数处理逻辑,并通过回调函数返回一个 JSON 对象,其中的 `code` 字段表示处理结果的状态。前端再根据这个状态进行相应的反馈。
$.getJSON 是一个非常实用的工具,用于跨域获取 JSON 数据。它简化了 AJAX 请求的过程,使得前端开发者可以轻松地与远程服务器进行数据交互。不过需要注意的是,JSONP 是一种基于 script 标签的跨域解决方案,只支持 GET 请求,而不能处理如 POST 等其他类型的 HTTP 请求。如果需要使用其他 HTTP 方法,可以考虑使用 jQuery 的 `$.ajax` 方法,配合 `dataType: 'jsonp'` 来实现跨域。