Angularjs cors 用get、post方法与springmvc后传递json数据的配置
来源:互联网 发布:vc和vb的功效 编辑:程序博客网 时间:2024/06/06 01:32
首先介绍跨域问题,基于安全的考虑,页面只有在同一个域名下,交流数据,比如网易就不能申请百度的服务(抓取网页那是另外的技术),ajax也是这个使用范围,跨域就失效了。
在移动开发中,手机本身就是web站点,后台pc服务器是另外一个web站点。这样就存在跨域问题。
早先用jsonp方法,或者在srpingmvc中设置拦截器来解决跨域传递json格式数据,但这些都过时了。
下面是最新的。注意只有spring4.3以上(包含4.3)才有效。
1.后台增加3个json的jar包,如下:
jackson-databind
jackson-core
jackson-annotations
附上maven配置,一看就懂了
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.5</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.8.5</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.8.5</version>
</dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.5</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.8.5</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.8.5</version>
</dependency>
2.后台设置,springmvc,中只要在类上设置一个注解@CrossOrigin,那么这个类就可以接受跨域申请。注意只有spring4.3以上(包含4.3)才支持注解@CrossOrigin,这点很多文章没提到。@CrossOrigin 的具体只接受某个域名的配置自己去网上查帮助。默认是允许所有域名访问。
具体的代码如下,
@CrossOrigin( maxAge = 3600)//配置这里就行了
@Controller
@RequestMapping("/personController")
public class PersonController {
//篇幅有限内容掏空了,最后由完成代码
}
3. 在返回json数据的方法上加注解:@ResponseBody (一般用于后台发达前端的 json数据)
@RequestMapping(value="getjsonp/{id}",method=RequestMethod.GET)
@ResponseBody
public Collection getjson(@PathVariable("id") Integer id,String callback) throws Exception{
}
4.在获取json数据的参数上加注解:@RequestBody (一般有用前端传递到后台的json数据)
@RequestMapping(value="postjson",method=RequestMethod.POST)
public String postjson(@RequestBody Person p) throws Exception{
}
附上后台接受方法,请注意后台方法直接反java类型就ok,系统会自动转成json格式
剩下的就是客户代码:下面演示了post和get方法,其中get部分去掉注释就可以了。我这里是为方便测试。
<scripttype="text/javascript">
varapp=angular.module("myApp",[]);
app.controller('firstController',function($scope,$http) {
//$scope.xx="xyz";
// $http.get('http://localhost:8080/SSM1/personController/getjsonp/100').success(function (data, status, headers, config){
// console.log(data);
// console.log(status);
// console.log(headers);
// console.log(config);
// }
//
// ).error(function (data, status, headers, config) {
// console.log(data);
// console.log(status);
// console.log(headers);
// console.log(config);
//
// })
$http({
url:'http://localhost:8080/SSM1/personController/postjsonp',
method:'POST',
data: {id:1,name:'美国',age:16}
}).success(function(){
console.log("success!");
}).error(function(){
console.log("error");
})
});
</script>
最后附上后台完整方法:
@CrossOrigin( maxAge = 3600)
@Controller
@RequestMapping("/personController")
public class PersonController {
//获取前端发出的get请求,前端代码要打开注解
@RequestMapping(value="getjson/{id}",method=RequestMethod.GET)
@ResponseBody
public Collection getjson(@PathVariable("id") Integer id,String callback) throws Exception{
Person p1= new Person(1,"aa",30);
Person p2= new Person(2,"bbb",50);
HashMap ps = new HashMap<Integer, Person>();
ps.put(1, p1);
ps.put(2, p2);
System.out.println(id.toString());
System.out.println(callback);
System.out.println("new Person p");
return ps.values();
}
//获取前端发出的post请求
@RequestMapping(value="postjson",method=RequestMethod.POST)
public String postjson(@RequestBody Person p) throws Exception{
System.out.println("id:"+p.getId());
System.out.println("name:"+p.getName());
System.out.println("age:"+p.getAge());
return "ok";
}
}
0 0
- Angularjs cors 用get、post方法与springmvc后传递json数据的配置
- Ajax与jQuery-利用$.get()和$.post()方法传递html,xml,json数据
- Ajax与jQuery-利用$.get()和$.post()方法传递html,xml,json数据
- GET与POST传递方法
- HTML数据的传递方式:get方法 和 post 方法
- 传递数据的两种方法GET和POST
- GET与POST传递数据的最大长度限制
- GET与POST传递数据的最大长度限制
- angularjs方式的get与post分析
- AngularJS下$http服务Post方法传递json参数
- 跨域post方式传递数据解决方案--CORS
- Android get/ post 方法 传递网络数据 -简单的翻译功能实现(GET)
- get,post数据长度的限制 2 GET与POST方法的区别
- 1 get,post数据长度的限制 2 GET与POST方法的区别
- get,post数据长度的限制 2 GET与POST方法的区别
- ThinkPHP与Angular使用POST方法传递数据的问题
- springMVC下的json数据的传递
- springMVC jquery 对json 数据的传递
- hdoj 5139Formula
- Android本地小说阅读器(仿真、覆盖、滑动翻页,支持大文件)
- hdoj 5124lines
- android 绘图之Path与Paint详解
- MySQL2.7.16安装配置方法
- Angularjs cors 用get、post方法与springmvc后传递json数据的配置
- transition标签、scale标签和inset标签
- 【玩转SQLite系列】(五)SQLite数据库优化
- 计算机网络的运输层
- 一片落叶的独白
- 90. Subsets II
- kettle 中出现的问题集锦
- 【Unity&DragonBones】像素角色人物骨骼动画教程(四)蒙皮骨骼动画使得角色动作更流畅
- IOS端静态代码无Bug?只需4步!