最近公司做项目,有一个功能,需要完成官网首页调用接口,完成数据的插入,用到了需要跨域的操作,经过本人的几天的研究,,终于实现了,说说网上的方法吧,将的很多,没有一个实用的,好多解释也不是很明确,所以本人在刚做完项目的情况下,根据自己的理解,以及自己的代码,帮助各位解决疑难,如有解释的不对的地方,尽请谅解!
什么是jsonp,我就不再赘述了.老生常谈了,主要说说跨域的几个方法,
第一个:使用注解,这个必须是springmvc4.2的版本,才支持,如果贵公司开发版本是springmvc4.2.很好解决,但是据本人听说不安全
第二个:使用nginx,也可以解决本人没有试验过,不过京东的同事说京东大量使用的就是nginx解决跨域的问题.
第三个:也是我在公司的项目中使用的方法,就是采用的jquery自己封装的jsonp,采用ajax的方式,调用接口,实现后台数据的查询或者插入,
本人的主要逻辑是开发了一个移动版的简单用户注册,后续公司在官网上增加了相应的功能,,所以采用调用接口的方式实现官网的调用,达到数据的存储
前台采用ajax调用,话不多说:直接附上前台ajax代码:
$.ajax({
type : "post",
url: "http://localhost:8080/wxh/seller/ajax/addMerchantsSettled",
data:{
name:username,
tel:tel,
city:city,
dianpu:Dname,
news:textmsg
},
dataType : "jsonp",//数据类型为jsonp
jsonpCallback:"callback",
success : function(data){
if(data.code==0){
alert("您已注册成功")
}
},
error:function(){
}
});
我大概做一些解释
1: type : "post",请求类型,其实这里是post还是get,没有影响,个都是可以的,只不过在采用jsonp请求的时候都会当做get请求处理
2: url:这个是前端开发的妹子跟你要的东西,也就是我们说的接口,什么是接口,不用我多说了吧?你的controller里面类名+方法名,我们采用的requestMapping注解的方式,也就是 requestMapping的东西,说白了,就是请求路径
3:data:如果是插入的话,就是input框里的数据,不在多说,都知道
4: dataType : "jsonp"这个是jsonp的标志,加入这个,也就是告诉jsquery,你要跨域了,赶紧准备callback,这样的话,jquery就知道你这是要跨域的节奏,就会乖乖为你准备好一个随机数,
5: jsonpCallback:"callback",这是指定回调函数,你就是不写这个,jquery也会给你指定的,所以这个你可以省略,除非你自己想起个名字,jquery默认的回调函数名就是callback
6:后面的不用我说了吧,大家都知道的
说的说后台的处理吧.直接上代码
/**
* 首页商户入驻接口
* @param name
* @param tele
* @param city
* @param dianpu
* @param news
* @param callback
* @return
* @throws ServletException
* @throws IOException
*/
@RequestMapping(value="addMerchantsSettled",method = RequestMethod.GET)
@ResponseBody
public String addMerchantSettle(
@RequestParam(value = "name", required = false) final String name,
@RequestParam(value = "tel", required = false) final String tele,
@RequestParam(value = "city", required = false) final String city,
@RequestParam(value = "dianpu", required = false) final String dianpu,
@RequestParam(value = "news", required = false) final String news,
@RequestParam(value = "callback",required = false) final String callback,
HttpServletResponse response
) throws ServletException, IOException{
MerchantSettleEntity merchantSettleEntity = new MerchantSettleEntity();
ApiResult result = new ApiResult();
//获取页面的传递过来的属性
merchantSettleEntity.setName(name);
merchantSettleEntity.setCity(city);
merchantSettleEntity.setNews(news);
merchantSettleEntity.setStorename(dianpu);
merchantSettleEntity.setTele(Long.parseLong(tele));
merchantSettleEntity.setCreatetime(new Date());
merchantSettleEntity.setStatus("2");
try {
//调用service完成插入
merchantSettleService.addMerchantSettle(merchantSettleEntity);
result.setCode(0);
result.setMessage("您的信息已经收到,我们会及时联系您!");
//处理中文乱码
response.setCharacterEncoding("utf-8");
} catch (Exception e) {
result.setCode(1);
result.setMessage("提交失败");
}
//判断是否是jsonp请求
if (StringUtils.isNotBlank(callback)) {
//返回js文件需要的格式
return callback + "(" + JSON.toJSONString(result) + ");";
}
else {
return JSON.toJSONString(result);
}
}
一定记得返回的一定是String类型json字符串,
本人返回的是以下内容
Object {code: 0, message: " 您的信息已经收到,我们会及时联系您!"}
这里还牵扯到处理乱码的问题,不要忘记了,这是插入的逻辑,如果各位遇到的是查询,就将返回的list集合中的对象转为json对象就可以了,以上就是我的理解,希望对大家有帮助,各位 看官不喜勿喷,我也是菜鸟一枚.
阿甘菜鸟
2017年05月18
type : "post",
url: "http://localhost:8080/wxh/seller/ajax/addMerchantsSettled",
data:{
name:username,
tel:tel,
city:city,
dianpu:Dname,
news:textmsg
},
dataType : "jsonp",//数据类型为jsonp
jsonpCallback:"callback",
success : function(data){
if(data.code==0){
alert("您已注册成功")
}
},
error:function(){
}
});
我大概做一些解释
1: type : "post",请求类型,其实这里是post还是get,没有影响,个都是可以的,只不过在采用jsonp请求的时候都会当做get请求处理
2: url:这个是前端开发的妹子跟你要的东西,也就是我们说的接口,什么是接口,不用我多说了吧?你的controller里面类名+方法名,我们采用的requestMapping注解的方式,也就是 requestMapping的东西,说白了,就是请求路径
3:data:如果是插入的话,就是input框里的数据,不在多说,都知道
4: dataType : "jsonp"这个是jsonp的标志,加入这个,也就是告诉jsquery,你要跨域了,赶紧准备callback,这样的话,jquery就知道你这是要跨域的节奏,就会乖乖为你准备好一个随机数,
5: jsonpCallback:"callback",这是指定回调函数,你就是不写这个,jquery也会给你指定的,所以这个你可以省略,除非你自己想起个名字,jquery默认的回调函数名就是callback
6:后面的不用我说了吧,大家都知道的
说的说后台的处理吧.直接上代码
/**
* 首页商户入驻接口
* @param name
* @param tele
* @param city
* @param dianpu
* @param news
* @param callback
* @return
* @throws ServletException
* @throws IOException
*/
@RequestMapping(value="addMerchantsSettled",method = RequestMethod.GET)
@ResponseBody
public String addMerchantSettle(
@RequestParam(value = "name", required = false) final String name,
@RequestParam(value = "tel", required = false) final String tele,
@RequestParam(value = "city", required = false) final String city,
@RequestParam(value = "dianpu", required = false) final String dianpu,
@RequestParam(value = "news", required = false) final String news,
@RequestParam(value = "callback",required = false) final String callback,
HttpServletResponse response
) throws ServletException, IOException{
MerchantSettleEntity merchantSettleEntity = new MerchantSettleEntity();
ApiResult result = new ApiResult();
//获取页面的传递过来的属性
merchantSettleEntity.setName(name);
merchantSettleEntity.setCity(city);
merchantSettleEntity.setNews(news);
merchantSettleEntity.setStorename(dianpu);
merchantSettleEntity.setTele(Long.parseLong(tele));
merchantSettleEntity.setCreatetime(new Date());
merchantSettleEntity.setStatus("2");
try {
//调用service完成插入
merchantSettleService.addMerchantSettle(merchantSettleEntity);
result.setCode(0);
result.setMessage("您的信息已经收到,我们会及时联系您!");
//处理中文乱码
response.setCharacterEncoding("utf-8");
} catch (Exception e) {
result.setCode(1);
result.setMessage("提交失败");
}
//判断是否是jsonp请求
if (StringUtils.isNotBlank(callback)) {
//返回js文件需要的格式
return callback + "(" + JSON.toJSONString(result) + ");";
}
else {
return JSON.toJSONString(result);
}
}
一定记得返回的一定是String类型json字符串,
本人返回的是以下内容
Object {code: 0, message: " 您的信息已经收到,我们会及时联系您!"}
这里还牵扯到处理乱码的问题,不要忘记了,这是插入的逻辑,如果各位遇到的是查询,就将返回的list集合中的对象转为json对象就可以了,以上就是我的理解,希望对大家有帮助,各位 看官不喜勿喷,我也是菜鸟一枚.
阿甘菜鸟
2017年05月18