jsonp跨域请求具体写法(原生,jquery,angular自定义服务)

最新推荐文章于 2023-03-01 18:47:20 发布

挤公交的哈巴狗

最新推荐文章于 2023-03-01 18:47:20 发布

阅读量287

点赞数

分类专栏： javascript 文章标签： angular jquery jsonp

本文链接：https://blog.csdn.net/weixin_39730738/article/details/78744707

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../app/bower_components/angular/angular.js"></script>
    <script src="../app/bower_components/jquery/dist/jquery.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="demoController"></div>
    <script>

        //原生js写法
       /* (function (){
            var script = document.createElement('script');
            script.src = "http://api.douban.com//v2/movie/in_theaters?count=2&start=4&callback=func";
            document.body.append(script);
        })();
        function func(data){
           console.log(data.subjects);
        }*/

        //jquery写法

       /* (function (){
            $.ajax({
                type: "get",
                async: false,
                url: "http://api.douban.com//v2/movie/in_theaters?count=2&start=4",
                dataType: "jsonp",
                jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
                jsonpCallback: "func",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
                success: function (data) {
                    console.log(data.subjects);
                },
                error: function () {
                   console.log('有错');
                }
            });
        })();*/

        //angualr解决跨域请求
        /*
        * 使用服务$http.jsonp,但是此时豆瓣接口并不接受自定义回调函数名称,协议不了,所以需要改进,angular必须使用JSON-CALLBACK的形式,返回后会自动生成函数名称
        * */
        var app = angular.module('app',[]);
        app.controller('demoController',['$scope','$http',function ($scope,$http){
           /* $http.jsonp('http://api.douban.com/v2/movie/in_theaters?callback=JSON_CALLBACK&count=2&start=4').then(function (res){
                console.log(res);
            })*/

            $http.jsonp('./angular_callback_0.json?callback=JSON_CALLBACK').then(function (res){
                console.log(res);
            })

        }])

    </script>
</body>
</html>

angular自定义服务,解决跨域请求

(function (angular){
    var http = angular.module('moviecat.services.http',[]);
    http.service('HttpService',['$document','$window',function ($document,$window){ this.jsonp = function (url,data,callback){ //解析字符串 var queryString = url.indexOf('?') == -1 ? '?' : '&'; for(var key in data){ queryString += key + "=" + data[key] + '&'; }; //绑定回调函数 var cbname = 'jsonp_'+Math.random().toString().replace('.',''); $window[cbname] = function (data){ callback(data) //防止页面上出现过多的script脚本,所有每次调用后,即时删除 ;$document[0].body.removeChild(script); }; queryString += 'callback='+cbname; var script = $document[0].createElement('script'); script.src = url + queryString; //添加到页面中 $document[0].body.append(script); } }])
})(angular);

挤公交的哈巴狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp跨域请求具体写法(原生,jquery,angular自定义服务)

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../app/bower_components/angular/angular.js"></script> <script src="../app/bower_components/jq
复制链接

扫一扫