Ajax跨域请求——jsonp获取json数据

最新推荐文章于 2026-05-17 06:56:29 发布

原创最新推荐文章于 2026-05-17 06:56:29 发布 · 1.6w 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#json #跨域 #ajax #java

java 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用JSONP解决跨域数据访问问题，并提供了一个具体的前后端实现案例。前端使用jQuery发起AJAX请求，后端采用Java处理跨域请求。

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题；

例如在同一个系统中，我们进行了分布式分域名的部署，但是在这个域里面，我们需要通过ajax的方式去访问获取另一个域的数据，这时就产生的跨域的请求，但是浏览器出去安全考虑，是不允许进行跨域请求的；

json与jsonp的区别：json是一种数据传输格式，而jsonp则是数据传输的协议或者是说方式。

直接码代码：

前端页面使用jquery进行ajax请求，当然使用js进行ajax请求的可以自行对应修改：

		$.ajax({
			type:'POST',
			url:  'www.xxx.com/goods/countGoodsNumByCategoryId.json',
			data:{"categoryId":id},
			dataType:'jsonp',
			async:false,
			jsonp:'jsonpCallback',//传递给后台程序，用来获取jsonp回调函数名的参数名
			success:function(data){
				var isExistGoods = data.isExistGoods;
				var isNeedChooseCategory = data.isNeedChooseCategory;
				if(isExistGoods == 1){
					alertMsg.error("该类目下已存在商品,不能删除!");
				}
				if(isNeedChooseCategory == 1){
					alertMsg.error("请选择一个类目!");
				}
			},
			error:function(){
				alertMsg.error("该类目下已存在商品,不能删除!");
			}
		});

我们的dataType必须为jsonp，然后比以往常规的ajax请求多了一个jsonp参数，这个参数是用来获取后台服务端返回的数据的；

服务端java代码：

	@RequestMapping({ "/countGoodsNumByCategoryId.json" })
	public void countGoodsNumByCategoryId(HttpServletRequest request, HttpServletResponse response) {
		response.setContentType("text/plain");
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
		Map<String, Object> paramsMap = new HashMap<String, Object>();
		Long categoryId = null;
		Map<String, Object> resultMap = new HashMap<String, Object>();
		String categoryIdJson = request.getParameter("categoryId");
		if (StringUtils.isNotBlank(categoryIdJson)) {
			categoryId = Long.parseLong(categoryIdJson);
			paramsMap.put("categoryId", categoryId);
			int goodsNum;
			try {
				goodsNum = goodsService.selectCount(paramsMap);
				if (goodsNum > 0) {
					resultMap.put("isExistGoods", BoolStatus.YES);
				} else {
					resultMap.put("isExistGoods", BoolStatus.NO);
				}
			} catch (ServiceException e) {
				LOG.error(e.getMessage(), e);
				resultMap.put("isExistGoods", BoolStatus.YES);
			}
		} else {
			resultMap.put("isNeedChooseCategory", BoolStatus.YES);
		}
		try {
			PrintWriter out = response.getWriter();
			JSONObject resultJSON = JSONObject.fromObject(resultMap); // 根据需要拼装json
			String jsonpCallback = request.getParameter("jsonpCallback");// 客户端请求参数
			out.println(jsonpCallback + "(" + resultJSON.toString(1, 1) + ")");// 返回jsonp格式数据
			out.flush();
			out.close();
		} catch (IOException e) {
			LOG.error(e.getMessage(), e);
		}
	}

上面这个代码片段，有些是我自己进行了工具类封装的，根据意思大家就能明白是起什么作用的。

返回数据是通过response的流来进行直接返回的，这里从request中间获取了一个jsonpCallback,这个跟我们的前台ajax那个jsonp参数是对应的，大家可以自行修改成自己喜欢的名称。

然后这样我们就完成了，跨域情况下的ajax请求。