学习：JsonP跨域的实例，Jsonp原生和JQuery方法，JAVA后端ssm/springB/C

最新推荐文章于 2021-08-06 19:26:46 发布

嗑瓜子儿溜茶水儿

最新推荐文章于 2021-08-06 19:26:46 发布

阅读量94

点赞数 1

分类专栏：学习前端工具

本文链接：https://blog.csdn.net/weixin_44062052/article/details/109221785

版权

学习同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

前端

6 篇文章 2 订阅

订阅专栏

工具

2 篇文章 0 订阅

订阅专栏

要了解同源策略，导致跨域，如何解决。

直接写前端的三种跨域方式，

怕忘了自己的思路，记下来免得以后再去找。

代码：

<!DOCTYPE html>
<html>
	<head>
		<title>Title</title>
		<script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2"
		 src="https://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>
		<script type="text/javascript">
			var url = '填写你的请求地址';
			function query() {
			//方案一：getJSON
				$.getJSON(url,function(data) {
						alert(JSON.stringify(data));
					}
				);
				
			//方案二：ajax
				$.ajax({
					url: url,
					dataType: 'json',
					jsonpCallback: 'callback', //Jquery生成验证参数的名称
					type: 'get',
					success: function(data) {
						console.info(data);
						
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						alert(XMLHttpRequest.status);
						alert(XMLHttpRequest.readyState);
						alert(textStatus);
					}
				});
			} 
			//方案三：原生 jsonp 跨域
			function GetJsonp()
				//创建 script 
				var tag = document.createElement('script');
				//设置 script 的属性 src 的路径为 后端 controller 的请求路径，src可以跨域请求 
				//要求，controller 返回的值是一个字符串，该字符串为：一个函数调用调用的函数名 为下方设置好的 callback()
				//controller 返回值格式  "callback(" + jsonData + ")"
				tag.src = url;
				document.head.appendChild(tag);
				document.head.removeChild(tag);
			 }
			function callback(data) {
				alert("执行了 callback 回调函数！");
				alert("参数为："+ JSON.stringify(data));
				//console.log(data);
			}
		</script>
	</head>
	<body>
		<input type="button" value="JQuery" onclick="query()">
		<input type="button" value="原生Jsonp" onclick="GetJsonp()">
	</body>
</html>

前两个方案 controller 这样写:

	@RequestMapping(value = "/",method = RequestMethod.GET)
    @ResponseBody
    public String testMethod(Object arg1,Object arg2) {
        //。。。。省略代码
        String jsonStr = "{'test':'获得数据'}";
        //直接返回数据就行，前端 JQ 的回调函数会获得此返回值，获得的是JSON类型的对象！
        return str; 
    }

第三个，要吃透原生jsonp的原理，上网查。。。
简单讲就是这么几个步骤：

定义一个函数，随便起名字叫function callback (data) { };
通过dom编程的方式，创建一个 script 标签，设置该标签的 src 属性为 controller 的请求路径，并把它放到 head 标签中。
这个被创建的 script 会根据 src 去请求服务器请求到的内容会写在标签内。
利用第三步的机制，我们在 controller 中 return 一个字符串格式为： “callback(” + json数据 + “);”
此时页面会调用之前定义的 callback 方法并向其中传入数据。

这样就可以在这个 callback 回调方法中，通过数据渲染视图了。

值得注意的是： 这个过程中要求 controller 明确回调方法的名称。这就需要在 url 后面添加一个参数，通过地址传参的方式将回调方法名 callback 传递给 controller

比如：

这样写请求地址
var url = 'http://localhost:8080/test?callback=callback';

对应的 controller ：

	@RequestMapping(value = "/",method = RequestMethod.GET)
    @ResponseBody
    public String testMethod(Object arg1,Object arg2) {
        //。。。。省略代码
        String jsonStr = "{'test':'获得数据'}";
        //直接返回数据就行，前端 JQ 的回调函数会获得此返回值，获得的是JSON类型的对象！
        return "callback("+ jsonStr +");"; 
    }

嗑瓜子儿溜茶水儿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习：JsonP跨域的实例，Jsonp原生和JQuery方法，JAVA后端ssm/springB/C

要了解同源策略，导致跨域，如何解决。直接写前端的三种跨域方式，怕忘了自己的思路，记下来免得以后再去找。代码：<!DOCTYPE html><html> <head> <title>Title</title> <script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ
复制链接

扫一扫