JSONP(JSON with Padding)是一种通过在页面上创建 <script> 标签来实现跨域请求的技术。jQuery 提供了 $.ajax() 方法,可以通过设置 dataType 为 'jsonp' 来使用 JSONP 进行远程调用。以下是一个简单的示例:
<!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