jquery ajax jsonp跨域调用实例代码

下面我来为你详细讲解“jquery ajax jsonp跨域调用实例代码”的完整攻略。

首先，需要理解什么是跨域调用。跨域调用是指在浏览器中向不同的域名或者端口发起网络请求，这个请求是会被浏览器进行安全性限制的。如果要进行跨域调用，则需要通过特定的方法进行解决。

一种常用的解决方法就是使用jsonp（JSON with Padding）方式来进行跨域请求。jsonp可以通过动态创建script标签、设置src属性并添加到页面中的方式进行请求。

下面是完整的jquery ajax jsonp跨域调用实例代码：

1. 动态创建script标签调用jsonp

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jsonp实例</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function(){
            var url = 'http://api.github.com/users/daifee'; //远程API地址
            $.ajax({
                url: url,
                dataType: 'jsonp',
                jsonp: 'callback',
                success: function(data){
                    console.log(data);  //成功回调返回的数据
                },
                error: function(xhr){
                    console.log('失败，原因为：' + xhr.status + ' ' + xhr.statusText);
                }
            });
        });
    </script>
</body>
</html>

通过这个方式，我们创建了一个script标签，使用了dataType为jsonp的ajax请求获取远程API的数据。其中的jsonp:'callback'表示我们要通过callback参数来获取返回值，并且在请求结束后会回调到success方法中。

2. 使用$.getJSON调用jsonp

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.getJSON方式</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function(){
            var url = 'https://api.douban.com/v2/movie/top250';
            $.getJSON(url + '?callback=?', null, function(data){
                console.log(data);
            }).fail(function(xhr){
                console.log('失败，原因为：' + xhr.status + ' ' + xhr.statusText);
            });
        });
    </script>
</body>
</html>

这个例子使用了$.getJSON方法来获取豆瓣电影Top250的数据。注意：在jsonp方式下，需要在请求的URL中添加callback=?参数，并且callback的值会自动生成并添加到请求中。getJSON请求成功后，回调函数会返回一个JSON数据对象。

通过这两个示例，我们可以初步了解jsonp方式的跨域请求。需要注意的是，在实际进行jsonp和跨域操作时，需要对返回的数据进行前后端协作，确保能够获取到正确的数据。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery ajax jsonp跨域调用实例代码 - Python技术站

jquery ajax jsonp跨域调用实例代码

1. 动态创建script标签调用jsonp

2. 使用$.getJSON调用jsonp

相关文章