jquery下利用jsonp跨域访问实现方法

下面是关于“jquery下利用jsonp跨域访问实现方法”的完整攻略。

什么是jsonp

JSONP（JSON with Padding）是 JSON 的一种“使用模式”，可用于解决跨域问题。其中，JSON 是一种数据格式，而 JSONP 则是一种数据传输方式。

在跨域请求的情况下，浏览器中的 JavaScript 是无法直接访问其他域名下的数据的，但如果服务器返回的是一段可执行的 JavaScript 代码，浏览器就可以接收并执行该代码，这样就可以获取其他域名下的数据了。JSONP 就是利用这一点来实现跨域数据请求的。

如何使用jsonp

使用 jQuery 下的 JSONP 实现跨域请求，可以按照如下步骤进行：

第一步：定义数据请求函数

首先，需要定义一个数据请求函数。这个函数需要传递两个参数：

请求的 URL；
成功获取数据的回调函数。

在回调函数中，我们可以进行数据的解析和数据的显示等操作。

function getData(url, callback) {
  $.ajax({
    url: url,
    dataType: 'jsonp',
    success: function(data){
      callback(data);
    }
  });
}

第二步：构建请求URL

构建请求 URL 的格式如下：

https://api.xxx.com/getData?callback=?

其中：

https://api.xxx.com/getData 是数据接口的地址；
callback=? 则是 JSONP 的核心，这个参数的值会被替换成一个唯一的函数名。通常情况下，就是在回调函数中使用这个唯一函数名来接收响应的数据。

var url = "https://api.xxx.com/getData?callback=?";

第三步：调用 data 请求函数并获取数据

最后，通过调用数据请求函数并传入 URL 和回调函数，可以成功获取数据。

function showData(data) {
  console.log(data);
}

getData(url, showData);

示例说明

示例1

请求百度搜索接口，获取搜索结果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用 JSONP 跨域请求百度搜索接口</title>
  <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(function() {
      var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=jquery&cb=?";
      function getMsg(data) {
        console.log(data);
      }
      $.ajax({
        type: 'get',
        url: url,
        dataType: 'jsonp',
        jsonp: 'cb', // 与请求URL的参数名一致
        success: function(data) {
          console.log(data);
        },
        error: function() {
          console.log('fail');
        }
      });
    })
  </script>
</head>
<body>
</body>
</html>

示例2

请求豆瓣电影接口，获取正在热映的电影列表。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用 JSONP 跨域请求豆瓣电影接口</title>
  <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(function() {
      var url = "https://api.douban.com/v2/movie/in_theaters?start=0&count=10&callback=?";
      function getMsg(data) {
        console.log(data);
      }
      $.getJSON(url, getMsg);
    })
  </script>
</head>
<body>
</body>
</html>

以上就是关于“jquery下利用jsonp跨域访问实现方法”的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery下利用jsonp跨域访问实现方法 - Python技术站