【笔记】JSONP跨域访问

发表于 2020-11-17 更新于 2024-04-30 分类于前端学习指北阅读次数：

前言

JSONP跨域访问

原理的实践

创建一个hello.json文件，文件内容编写js格式的函数，对象作为函数的参数

1	hello({"name":"zhangsan"})

先定义回调函数

1
2
3

function hello(data) {
    console.log(data.name);
}

通过script标签的src属性引入json文件

1	<script src="hello.json"></script>

通过jQuery实现进阶

$.ajax({
    url:"http://localhost/hello.json",
    // jsonp只能支持get请求，即便定义的不是get或者没定义
    type:"get",
    // dataType返回值类型必须定义jsonp才能实现jsonp方式的跨域
    dataType:"jsonp",
    // 指定参数名称，可以省略有默认值
    jsonp: "callback",
    // 指定回调函数名称，可以省略有默认值
    jsonpCallback: "hello",
    success:function (data){
        alert(data.name);
    }
});

完成

0%