<!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://api.example.com/data', // 替换为实际的 API 地址
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' 指定回调参数名。在实际使用时，请将 URL 替换为你要调用的 API 地址。
需要注意的是，JSONP 是一种比较古老的跨域请求技术，它主要依赖于动态创建 <script> 标签来加载数据。虽然 JSONP 有一些局限性（例如只支持 GET 请求），但它是一个兼容性较好的跨域解决方案。在现代的 Web 开发中，CORS（Cross-Origin Resource Sharing）已经成为更为常见的跨域解决方案。
转载请注明出处：http://www.zyzy.cn/article/detail/4550/JSON