jsonp 实现跨域请求

最新推荐文章于 2024-06-20 20:55:24 发布

前方太黑暗

最新推荐文章于 2024-06-20 20:55:24 发布

阅读量139

点赞数 1

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

本文链接：https://blog.csdn.net/xcc_2269861428/article/details/97654870

版权

jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

跨域请求的概念不在多说。主要看代码实现

需要注意的是jsonp只支持get请求。

还有使用jsonp跨域请求，后端也是必须要有相应的改变，返回callback函数

前端代码

<body>
	<input type="button" value="跨域GET" id="aaa">
	<script type="text/javascript">
	$(function(){
	 	$("#aaa").on('click',function(e){

			$.ajax({
				url : "http://dhjdhkahdahdkaa/wx_public/api/getUserByName2/徐长城",
	    		dataType : 'jsonp',
	    		type : 'get',
	    		jsonp: "callback",
	    		jsonpCallback:"callback2",
	    		success : function(response) {
	    			console.log(response.msg)
	    			alert(response.msg)
	    		},
	    		errorfun : function() {
	    			alert("error")
	    		}
	    	});  
	 	});
	})
	</script>
</body>

后端代码

@RequestMapping(value="getUserByName2/{name}", method = RequestMethod.GET, produces = "application/json;charset=UTF-8")
	@ResponseBody
	public String getUserByName2(HttpServletRequest request,@PathVariable("name") String name){
		ResponseData responseData=new ResponseData();
		try{
			String token = request.getHeader("token");
			responseData = apiService.userIfExist(token, name);
	    } catch (Exception e) {
			e.printStackTrace();
			responseData.setStatus(1);
			responseData.setMsg("系统异常");
		}
		return  "callback2("+JSONObject.fromObject(responseData).toString()+")";
	}

callback2就是我前面ajax里面定义的jsonpCallback，这块必须对应上

请求成功的返回结果如图：

前方太黑暗

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp 实现跨域请求

跨域请求的概念不在多说。主要看代码实现需要注意的是jsonp只支持get请求。还有使用jsonp跨域请求，后端也是必须要有相应的改变，返回callback函数前端代码<body> <input type="button" value="跨域GET" id="aaa"> <script type="text/javascript"> $(f...
复制链接

扫一扫

专栏目录