<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
// 设置 JSONP 请求
$.ajax({
url: 'https://example.com/api/data',
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback', // 指定回调参数名
success: function(data) {
// 处理获取到的 JSONP 数据
console.log(data);
// 示例:输出 JSONP 数据的某个属性
console.log('Name: ' + data.name);
},
error: function(error) {
console.error('Error:', error);
}
});
});
</script>
</body>
</html>
在这个例子中,通过设置 dataType: 'jsonp',jQuery 将使用 JSONP 方式进行远程调用。另外,通过设置 jsonp: 'callback' 指定回调参数名,这是因为 JSONP 请求通常需要在 URL 中指定一个回调函数的参数名,服务器端返回的响应将被包裹在这个回调函数中。
在实际使用时,请确保服务器端支持 JSONP 请求,并正确处理回调参数。常见的做法是服务器接收到请求后,返回一个 JavaScript 脚本,其中包含回调函数的调用,这样浏览器就会执行这个脚本,从而完成 JSONP 请求。
转载请注明出处:http://www.zyzy.cn/article/detail/4549/JSON