JSONP 实现跨域请求实例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js">&l...

gqzydh

7943人浏览 · 2019-03-29 17:07:49

gqzydh · 2019-03-29 17:07:49 发布

JSONP实现Vue跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<!--百du接口-->
<ul id="box">
    <li v-for="item in v1">{{item}}</li>
</ul>

<script>
var vue = new Vue( {
    el: '#box',
    data () {
        return {
            v1:"0"
        }
    },
   mounted:function(){
 //                请求路径
            this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                    {
                        //请求参数
                        params: {
                            wd:this.v1
                        },
                        jsonp:'cb'
//                        回调参数
                    }).then(function(res){
//                字符串转成json对象
//                console.log(JSON.parse(res.bodyText).s);
//                JSON.parse() 方法将数据转换为 JavaScript 对象。
               vue.v1 = JSON.parse(res.bodyText).s;
            }
              ,function(){
                console.log("抱歉无法调取")
            }
            )
        }
});

/*同源策略下，某个服务器是无法获取到服务器以外的数据，
但是html里面的img,iframe和script等标签是个例外，
这些标签可以通过src属性请求到其他服务器上的数据。
而JSONP就是通过script节点src调用跨域的请求。*/
</script>

</body>
</html>

JSONP实现ajax跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax-jsonp 跨域请求</title>
</head>
<body>
<!--百du接口-->
<ul id="box">
    ajax-jsonp 跨域请求
</ul>

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>
var url = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su';
$.ajax({
    url: url,
    type: 'GET',
    dataType: "jsonp",
    jsonp: "cb",
   // cache: true,    //禁止缓存
  // jsonpCallback: 'wd',
    data: {'wd': '0'},
    success: function(res) {
        var data = JSON.parse(res.bodyText).s
       console.log("跨域请求", data);
    }
});
</script>

</body>
</html>

jsonp: callback #发送给请求处理程序的,被请求端通过request.GET.get(“callback”),获得jsonp回调函数的参数
jsonpCallback: 'list' #定义回调函数的名称,然后后面通过list(…)来处理获取数据

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^