jsonp的解决ajax跨域问题

最新推荐文章于 2025-06-29 11:10:32 发布

有梦想的咸鱼xx

最新推荐文章于 2025-06-29 11:10:32 发布

阅读量467

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax跨域文章标签： jsonp 跨域

本文链接：https://blog.youkuaiyun.com/qq_31489805/article/details/78207652

ajax跨域专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用JSONP解决前端开发中的跨域问题。通过客户端和服务端的配合，实现跨域数据请求。包括前端使用jQuery发起JSONP请求的方法及服务端对请求的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、ajax跨域问题，使用jsonp进行解决

利用js的特性

<script type="text/javascript" src="http://localhost:2701/Scripts/jquery-1.4.4.min.js"></script>

返回后调用方法解析数据到ajax请求中的data数据中

简单的理解为带callback的json就是jsonp.

2、前端

话不多说，上js代码，使用方法和普通ajax一样，返回数据类型为jsonp即可。

$.ajax({
			url : "http://localhost:8089/user/token/" + _ticket,
			dataType : "jsonp",
			type : "GET",
			success : function(data){
				if(data.status == 200){
					var username = data.data.username;
					var html = username + "，欢迎来到淘淘！<a href=\"http://www.taotao.com/user/logout.html\" class=\"link-logout\">[退出]</a>";
					$("#loginbar").html(html);
				}
			}
		});

3、服务端在返回json的时候包装一层即可返回格式（callback(jsonString);）

@RequestMapping(value="/user/token/{token}",method=RequestMethod.GET,
			//指定响应的格式
			produces=MediaType.APPLICATION_JSON_UTF8_VALUE)
	@ResponseBody
	public String getUserByToken(@PathVariable String token,String callback){
		TaotaoResult result = userService.getUserByToken(token);
		//判断是否为jsonp请求
		if(StringUtils.isNotBlank(callback)){
			return callback +"("+JsonUtils.objectToJson(result)+");";
		}
		return JsonUtils.objectToJson(result);
	}

4、spring4.1以上的解决办法

//jsonp第二种解决办法  需要spring4.1以上
	@RequestMapping(value="/user/token/{token}",method=RequestMethod.GET)
	@ResponseBody
	public Object getUserByToken(@PathVariable String token,String callback){
		TaotaoResult result = userService.getUserByToken(token);
		//判断是否为jsonp请求
		if(StringUtils.isNotBlank(callback)){
			MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result);
			//设置回调方法
			mappingJacksonValue.setJsonpFunction(callback);
			return mappingJacksonValue;
		}
		return result;
	}