最近在学习AngularJS的知识，收获不少，不过因为自己平时工作时开发都是用的freemarker springmvc来做的页面数据交互，所以也自然想到了用angularjs springmvc来做同样的事情。当然，在学习之前也到网上查阅了非常多的资料，但是都不是那么明细或者简单，至少对于本人来说都是看的是一知半解。所以用了些时间对这种方式进行学习。

在查阅了许多的资料以后，大致明白了AngularJs将数值传递给后台的方式是将要传递的对象Json化之后传递给后台，这点和埃阿斯比较类似，当然也是属于异步提交数据的方式。本人还没有了解过AngularJs同步方式提交数据是怎样，不过想想只需要将要的数据绑定在投入标签上，之后还是用超文本标记语言的提交还是可以简便的实现的。

传递数据到后台

下面就来简单举个例子来说明吧

首先我们把springmvc的环境搭好，先来web.xml

？可扩展标记语言版本='1.0 '编码='UTF-8 '？WEB-app xmlns : xsi=' http://www .w3。org/2001/XMLSchema-实例' xmlns=' http://Java。星期日com/XML/ns/javaee ' xsi :架构位置=' http://Java。星期日com/XML/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd' ID=' WEB app _ ID '版本=' 3.0 ' display-namesprinmvc/display-name context-param-name context config do/URL-pattern/servlet-mapping/WEB-app这里我把应用程序上下文改了一个名字，以免和我自己本身用的冲突，并且设置了一下触发springmvc的全球资源定位器(统一资源定位符)模式，是以。做结尾发起请求

下面是angular jstestapplicationcontext。可扩展置标语言

？可扩展标记语言版本='1.0 '编码='UTF-8 '？beans xmlns=' http://www。弹簧框架。org/schema/beans ' xmlns : xsi=' http://www .w3。org/2001/XMLSchema-instance ' xmlns : p=' http://www .弹簧框架。org/schema/p ' xmlns : VC=' http://www .弹簧框架。org/schema/MVC ' xmlns : context=' 3http://8 www .JSP '//bean/bean我直接用了MVC :注释驱动/就用默认的数据转换器了，因为默认的里面有对Json串进行数据绑定的转换器

这样手动音量调节的环境已经搭建好了，下面我们写页面

% @ page语言=' Java ' ContentType=' text/html；charset=UTF-8 '页面编码=' UTF-8 ' %！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML ng-app=' hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 '脚本类型=' text/JavaScript ' src=' http :/棱角分明。js '/脚本标题angularjstest/title/head body ng-controller=' my controller ' Puser/p PiD/p输入id=' id ' name=' id ' ng-model=' save user。id ' br pName/p输入id=' id ' name=' name ' ng-model=' save user。名称' br page/p输入id=' id ' name=' age ' ng-model=' save user。年龄' br按钮ng-click='getUser()'提交/按钮脚本函数MyController($scope，$ http){ $ scope。保存用户={ id :1，姓名：'John '，年龄： ' 16 ' }；$ scope。getUSer=function(){ $ http({ method : ' POST '，URL : ' http://localhost :8080/SpringMVc/AngularJS/getUSer。do '，data: $scope.saveUser }).成功（函数（数据、状态){ //句柄成功})};}/脚本/正文/html页面很简单，有三个输入参数，身份证，姓名，年龄绑定了控制器里面的保存用户对象的属性，这个也对应了我后台需要绑定的数据的属性名称。对于AngularJs，在身体标签处声明了一个控制器我的控制器，之后在脚本中对这个控制器里面的保存用户对象属性进行了初始化并且定义了一个方法getUser，它是传递参数的关键。之后制定了当点击提交按钮以后会把数据传递出去。

看一下getUser方法，看上去很像创建交互式、快速动态网页应用的网页开发技术的提交数据方式，指定了请求的方法是帖子，请求的地址全球资源定位器(统一资源定位符)以及请求中要发送的数据数据，这里我将我的控制器控制器中的对象属性作为数据进行传递，这个对象在传输的时候会自动的将其结构转换成Json格式进行传递

下面贴上后台控制器的代码

包裹。com。包。web导入com。宝宝来了。领域。成角病毒；导入组织。弹簧框架。刻板印象。控制器；导入组织。弹簧框架。网络。绑定。注释。RequestBody导入组织。弹簧框架。网络。绑定。注释。请求映射；导入组织。弹簧框架。网络。绑定。注释。请求方法；导入组织。弹簧框架。网络。绑定。注释。反应体；导入组织。弹簧框架。网络。servlet。modelAnDview@ Controller @请求映射(值='/AngularJS ')公共类TestAngularJS { @请求映射('/intro。do’)公共modelAndView intro(){ modelAndView MAV=new modelAndView()；MAV。setviewname(' AngularJsTest ')；返回mav} @RequestMapping(值='/getUser.do '，方法=RequestMethod .开机自检)公共字符串getUSer(@ request body angulauser angulauser){ system。出去。println(' ID ' angulauser)。getid())；系统。出去。println(' name ' angluser。getname())；系统。出去。println(' age ' angulauser)。GetAge())；返回null}}页面上的请求映射到了这里的getUser方法，因为页面上提出的请求方法是帖子，所以我们这里也设定请求映射的方法为帖子，最为关键的就是@RequestBody这个注释，其可以将传来的Json格式的数据与豆中的属性值进行直接绑定，也就是说这里的角用户对象内的属性已经成功的被赋值了，这里贴上角豆定义

打包。宝宝来了。领域；公共类角用户{长id字符串名称；字符串年龄；public Long GetID(){ return id；} public void SetID(Long id){ this。id=id} public String getName(){ return name；} public void setName(String name){ this。name=name} public String GetAge(){ return age；} public void setAge(String age){ this。年龄=年龄；}}部署到服务器上运行，直接点击提交按钮以后后台控制台结果

ID1nameJohnage16

之后我们将投入中的数值改变为大卫，17岁，点击提交按钮控制台结果

id2名称大卫时代17

测试成功

从后台获取数据

这个要容易些，对原有的内容适当修改就可以了

页面

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML ng-app=' hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 '脚本类型=' text/JavaScript ' src=' http :/棱角分明。js '/脚本标题angularjstest/title/head body ng-controller=' my controller ' Puser/p PiD/p输入ID=' ID '名称=' ID ' ng-model='保存用户。ID ' br pName/p输入ID=' ID ' name='保存用户。名称' br page/p输入ID=' ID ' name=' age ' ng-model=' save USer。信息中的年龄' br ul Li ng-repeat=' x ' { x . ID x . name提交/按钮脚本函数MyController($scope，$ http){ $ scope。保存用户={ id :1，姓名：'John '，年龄： ' 16 ' }；$ scope。getUSer=function(){ $ http({ method : ' POST '，URL : ' http://localhost :8080/SpringMVc/AngularJS/getUSer。do '，data: $scope.saveUser }).成功(函数(数据){ $ scope。infos=数据；}) };}/脚本/正文/html这里增加了一个保险商实验所标签用来接收从后台传过来的数据，里面存储的是一个Json数组，这个数组在当我们点击按钮之后触发的回调函数中进行赋值，而回调的这个函数的参数数据就是我们从后台获取到的数据，具体数据是怎样的要看后台控制器中返回的数值是怎样的。这里我们返回的是一个Json数组

包裹。com。包。web导入com。宝宝来了。领域。成角病毒；导入组织。弹簧框架。刻板印象。控制器；导入组织。弹簧框架。网络。绑定。注释。RequestBody导入组织。弹簧框架。网络。绑定。注释。请求映射；导入组织。弹簧框架。网络。绑定。注释。请求方法；导入组织。弹簧框架。网络。绑定。注释。反应体；导入组织。弹簧框架。网络。servlet。modelAnDview导入Java。乌提尔。ArrayList导入Java。乌提尔。HashMap导入Java。乌提尔。列表；导入Java。乌提尔。地图；@ Controller @请求映射(值='/AngularJS ')公共类TestAngularJS { @请求映射('/intro。do’)公共modelAndView intro(){ modelAndView MAV=new modelAndView()；MAV。setviewname(' AngularJsTest ')；返回mav} @RequestMapping(值='/getUser.do '，方法=RequestMethod .POST)@响应体公共列表mapstring，String getUser(@请求体angulauser angulauser){ system。出去。println(' ID ' angulauser)。getid())；系统。出去。println(' name ' angluser。getname())；系统。出去。println(' age ' angulauser)。GetAge())；ListMapString，String list=new ArrayListMapString，String()；for(int I=0；i5；i ){ MapString，String map=new HashMapString，String()；map.put('ID '，字符串。(一)的价值；map.put('name '，字符串。(一)的价值；map.put('age '，string。(一)的价值；名单。添加(地图)；}返回列表；}}上面是修改过的控制器，我将返回值改为了一个列表，里面的数据是地图这样就刚好符合Json数组的数据模式了，当然最重要的是这里在方法前需要添加一个@ResponseBody注释，它可以把返回的值转化为Json格式的数据

好了，运行一下程序试试，点击提交按钮，出现了结果

测试成功

上面这两种是最简单的方式实现了AngularJs和springmvc的结合使用，基本的功能算是实现了，后面若学到还有其他方法会在这里补充

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。