Jsonp

最新推荐文章于 2022-10-31 16:43:43 发布

woody_me2222

最新推荐文章于 2022-10-31 16:43:43 发布

阅读量683

点赞数

分类专栏： JSONP 文章标签： jsonp

本文链接：https://blog.csdn.net/sinat_38278330/article/details/78909852

版权

JSONP 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Jsonp 理解

1、最近稍微看了下jsonp的东西，整理如下。

2、服务端代码大概可以写成这样：

    @GetMapping("/iojsonp")
    def iop(@RequestParam String jsonpFunctionName,@RequestParam Integer id){

        return "${jsonpFunctionName}({id:${id},name:\"userName\"})".toString()
    }

返回字符串实际上是 function(json) 格式：

即期望前端调用的js 函数带上参数。

比如前端期望返回的数据是 {id:1}

但是现在需要返回 functionName({id:1}) ，然后前端自己定义functionName 函数，就可以接受到json 数值。

3.1 原始实现jsonp 的方法

定义回调的js函数：

<script>
	  
	function callback(data){
		var j = JSON.stringify(data);
		$('#inbox').text(j);
	}
	 
	 
</script>

定义jsonp 请求：

<script type="text/javascript" src="http://localhost:8081/test/iojsonp?jsonpFunctionName=callback&id=1000"></script>

这里的jsonpFunctionName 就是后端定义的参数，而callback 是前端的函数。

根据需要调整<script>标签的位置。

3.2 利用jQuery 实现

利用jQuery实现，如下：

<script>
	function JsonpTest(){
		 $.ajax({
			url:"http://localhost:8081/test/iojsonp",
			type:"GET",
			dataType:"jsonp",
			jsonp:"jsonpFunctionName",
			data:{
				id:10230
			},
			success:function(data){
				var j = JSON.stringify(data);
				console.log(j);
				$("#inbox").text(j);
			}
			
		 })
	}
	 
</script>

其中：dataType 必须为'jsonp',, jsonp 参数即为后端定义的参数名，

需要传的参数仍在data中，回调的success函数为 jQuery默认回调。还有一个可选参数为 jsonpCallback ,不填的话默认为jQuery随机生成的函数名。

全部示例：

<!DOCTYPE html>
<thml>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>
<script>
	function directCORSTest(){
		$.ajax({
			type:"GET",
			url:"http://localhost:8081/test/io.json",
			data:{
				a:"ThisType"
			},
			success:function(data){
				alert(JSON.stringify(data))
			},
			error:function(data){
				alert("failed in ajax")
			}
		})
	}
	
	function callback(data){
		var j = JSON.stringify(data);
		$('#inbox').text(j);
	}
	
	function JsonpTest(){
		 $.ajax({
			url:"http://localhost:8081/test/iojsonp",
			type:"GET",
			dataType:"jsonp",
			jsonp:"jsonpFunctionName",
			data:{
				id:10230
			},
			success:function(data){
				var j = JSON.stringify(data);
				console.log(j);
				$("#inbox").text(j);
			}
			
		 })
	}
	 
</script>


</head>
<body>
<h1>Title</h1>
<button id='btn' value="queding" name="queding" οnclick='directCORSTest()'>确定CORS</button>
<button id='btn2' value="queding2" name="queding2" οnclick='JsonpTest()'>确定Jsonp</button>
<p id='inbox'></p>
<script type="text/javascript" src="http://localhost:8081/test/iojsonp?jsonpFunctionName=callback&id=1000"></script>
</body>
</html>