在上篇的基础上

准备工作：

修改pom.xml

项目xmlns=' http://aven。阿帕奇。org/POM/4。0 .0 ' xmlns : xsi=' http://www。w3。org/2001/XMLSchema-instance ' xsi 3360 schema location=' http://aven。阿帕奇。org/POM/4。0 .0 http://maven.apache.org/xsd/maven-4.0.0.xsd'模型版本4 .0 .0/模型版本idcom集团。github。Carter 659/组id artifactIdspring 03/修改App.java

包裹。com。github。卡特659。03年春天；导入组织。弹簧框架。靴子。弹簧应用；导入组织。弹簧框架。靴子。自动配置。回弹应用程序；@回弹应用公共类app { public static void main(String[]args){ spring application。运行(App。类，args)；} }新建“Order.java”类文件：

包裹。com。github。卡特659。03年春天；导入Java。乌提尔。日期；公共类顺序{公共字符串号；公开日期；公共国际数量；}说明一下：这里我直接使用公众的字段了，获取/设置方法就不写了。

新建控制器"主控制器":

包裹。com。github。卡特659。03年春天；导入Java。时间到了。ZoneID导入Java。乌提尔。HashMap导入Java。乌提尔。地图；导入组织。弹簧框架。刻板印象。控制器；导入组织。弹簧框架。网络。绑定。注释。getmapping导入组织。弹簧框架。网络。绑定。注释。后期映射；导入组织。弹簧框架。网络。绑定。注释。RequestBody导入组织。弹簧框架。网络。绑定。注释。反应体；@Controllerpublic类主控制器{ @GetMapping('/')公共字符串索引(){返回“index”；} @ GetMapping("/jquery ")公共字符串jquery(){返回“jquery”；} @GetMapping('/angularjs ')公共string angular js(){ return ' angular js '；} @ post映射(“/post data”)public @ response body MapString，Object postData(字符串编号，int数量，字符串日期){系统。出去。println(' no . ' no)；系统。出去。println('数量： '数量);系统。出去。println(' date : ' date)；MapString，Object map=new HashMap()；map.put('msg '，' ok ')；map.put('数量，数量);map.put('no '，no)；map.put('date '，date)；返回地图；} @ post映射('/post JSON ')public @响应体MapString，Object post JSON(@请求体Order){ system。出去。println('订单编号： '订单。没有)；System.out.println('订单数量： '订单。数量);系统。出去。println('订单日期： '订单。约会。立即(到).atZone(ZoneId.systemDefault()).toLocalDate())；MapString，Object map=new HashMap()；map.put('msg '，' ok ')；map.put('value '，order)；返回地图；}}新建jquery.html文件：

！DOCTYPE html html xmlns : th=' http://www .百里香叶。org ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8。bootscs。com/jquery/1。11 .3/jquery。量滴js '/script脚本类型=' text/JavaScript '/*！[CData[*/function PostDATa(){ var data=' no=' $(' # no ').“val()”数量=' $(' #数量')。val()“date=”$(“# date”).val()；$.ajax({ type : 'POST '，url : '/postData '，data : data，success : function(r){ console。日志(r)；},错误： function() { alert('error！') } });}函数postJson(){ var data={ no . $(' # no ').val()，数量：美元(' #数量').val()，日期：美元(“#date”).val()}；$.ajax({ type : 'POST '，内容类型： ' application/JSON '，url : '/postJson '，数据： JSON.stringify(data)，success : function(r){ console。日志(r)；},错误： function() { alert('error！') } });}/*]*//脚本/头体编号：输入id='否'值='不。1234567890 '/br/数量：输入id='数量'值='100'/br/date:输入id='date '值='2016-12-20'/br /输入值='postData '类型=' button ' onclick=' PostDATa()'/br/输入值='postJson '类型='新建“angularjs.html”文件：

！DOCTYPE html html xmlns : th=' http://www .百里香叶。org ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8。bootscs。com/angular。js/1。5 .6/棱角分明。量滴js '/script脚本类型=' text/JavaScript ' var app=angular。模块(' app '，[])；app.controller('MainController '，function($rootScope，$scope，$ http){ $ scope。数据={否。 '不。1234567890 '，数量： 100，'日期： ' 2016-12-20 ' }；$ scope。PostJSon=function(){ $ http({ URL : '/Postjson '，方法： '开机自检'，数据：美元scope.data }).成功(函数){ $ scope。响应体=r；});} });/脚本/头体ng-app=' app ' ng-controller='主控制器'编号：输入id=' no ' ng-model='数据。编号'/br/数量：输入id=' quantity ' ng-model=' data。数量'/br/日期：输入id=' date ' ng-model=' data。日期'/br/输入值=' Postjson ' type=' button ' ng-click=' Postjson()'/br/br/div { { response boxe }项目结构如下图：

一、结合jquery

运行App.java后进去" http://localhost:8080/jquery "页面

点击"后期数据"按钮：

jquery成功的调用了spring mvc的后台方法公共@响应数据映射字符串，对象后数据（字符串号，整数，字符串日期)

这里，"日期"参数我使用的是线类型，而并不是日期类型。因为大多数情况是使用对象形式来接收创建交互式、快速动态网页应用的网页开发技术客户端的值，所以我这里偷懒了，就直接使用线类型。如果想使用日期类型，则需要使用@InitBinder注解，后面的篇幅中会讲到，在这里就不再赘述。

另外，使用"百里香叶"模板引擎在编写射流研究…时，""关键字要特别注意，因为"百里香叶"模板引擎使用的是可扩展标记语言语法。因此，在脚本标签的开始——结束的位置要加"/*![CDATA[*/./*]]*/"

例如：

脚本类型='text/javascript' /*！[CDATA[*///javascript代码./*]]*//脚本否则，运行"百里香叶"模板引擎时就会出现错误“组织。XML。萨克斯。SaxParessexception : "

点击“postJson”按钮：

jquery则成功调用了后台" public @ResponseBody映射字符串，对象postJson(@RequestBody顺序)"方法，

并且参数"秩序"中的属性或字段也能被自动赋值，而日期类一样会被赋值。

注意：当使用$。jquery的ajax方法，contentType参数需要使用“application/json”，后台spring mvc的“postJson”方法中的“order”参数也需要使用@RequestBody标注。

第二，结合angularjs

进入“输入http://localhost :8080/angular js后”页面

点击“发布”按钮：

在使用angularjs后，仍然可以调用方法“public @ responsebody mapstring，object post JSON(@ requestbodyorder order)”。

代码：https://github.com/carter659/spring-boot-03.git

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