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

2017-01-13 19:09:54来源:CSDN作者:xiangnan129人点击

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请求。



最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台