Angularjs cors 用get、post方法与springmvc后传递json数据的配置

前端之家收集整理的这篇文章主要介绍了Angularjs cors 用get、post方法与springmvc后传递json数据的配置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
首先介绍跨域问题,基于安全的考虑,页面只有在同一个域名下,交流数据,比如网易就不能申请百度的服务(抓取网页那是另外的技术),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>

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部分去掉注释就可以了。我这里是为方便测试。
< script @H_502_131@type= "text/javascript" >
var app =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,config) {
// })


$http({
url : 'http://localhost:8080/SSM1/personController/postjsonp' ,
method : 'POST' ,122)">data : { id : 1 , name : ' 美国 ' ,122)">age : 16 }
}).success( function (){
console . log ( "success!" );
}). error ( "error" );
})


});

</ script >

最后附上后台完整方法
@CrossOrigin( maxAge = 3600)
@Controller
@RequestMapping("/personController")
public class PersonController {
//获取前端发出的get请求,前端代码要打开注解
@RequestMapping(value="getjson/{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";
}

}
原文链接:https://www.f2er.com/springmvc/148502.html

猜你在找的SpringMVC相关文章