在上篇的基础上
准备工作：
修改pom.xml
<Project XMLNS =“ http://maven.apache.org/pom/4.0.0” xmlns：xsi =“ http：//www.org/2001/xmlschema-chema-ingschema-ingschema-ingstance” http://maven.apache.org/xsd/maven-4.0.0.0.xsd“> <modelversion> 4.0.0 </modelversion> <groupId> com.github.carter.carter659 </groupId> <ARTIFACTID> <ARTIFACTID> spring> Spring03 </atrifactid> spring> </atrifactid> </atrifactid> </atrifactid> </atrifactid> 0.0.0.1-snapsgage </proce> </proce> </proces> <Name> spring03 </name> <url> http://maven.apache.org </url> <parent> <ground> <groupId> org.springframework.boot.boot.boot </groupId> <ARTIFACTID> spring-boot-boot-boot-starter-starter-parent-parent-parent-parent-parent-parent-parent-parent-parent-parent> </artifactid> <project.build.sourceencoding> utf-8 </project.build.sourceencoding> <java.version> 1.8 </java.version> </properties> <dependencies> <dependencies> <dependency> <groupency> <groupId> org.springframework.springframework.boot> boot> boot> boot> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <Artifactid> spring-boot-maven-plugin </artifactid> </plugin> </plugins> </build> </project> </project>
修改app.java
包com.github.carter659.spring03;导入org.springframework.boot.springapplication; import org.springframework.boot.autoconfigure.springbootapplication; args）; }}}
新建“ order.java”类文件：：
软件包com.github.carter659.spring03; import java.util.date;公共类订单{public string no;公共日期；公共数量;}说明一下：这里我直接使用public字段了，get/set方法就不写了。
新建控制器“ Main Controller”：：
package com.github.carter659.spring03;import java.time.ZoneId;import java.util.HashMap;import java.util.Map;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.ResponseBody;@Controllerpublic class MainController { @GetMapping("/") public String index() { return "index"; } @getMapping（“/jquery”）public string jquery（）{return“ jquery”; } @getMapping（“/angularjs”）public String angularjs（）{返回“ angularjs”; } @postMapping（“/postData”）public @Responsebody映射<字符串，object> postdata（字符串no，int nature，string date）{system.out.ut.println（“ no：” no：“ + no）; system.out.println（“数量：” +数量）; system.out.println（“日期：” + date）; MAP <String，Object> map = new Hashmap <>（）; map.put（“ msg”，“ ok”）; map.put（“数量”，数量）; map.put（“否”，否）; map.put（“日期”，日期）;返回地图； } @postmapping（“/postjson”）public @Responsebody映射<string，object> postjson（@requestbody订单订单）{system.out.ut.println（“订单no：” + order.no）; system.out.println（“订单数量：” + order.quantity）; system.out.println（“订单日期：” + order.date.date.toinstant（）。atzone（Zoneid.systemdefault（））。tolocaldate（））; MAP <String，Object> map = new Hashmap <>（）; map.put（“ msg”，“ ok”）; map.put（“值”，订单）;返回地图； }}}新建jQuery.html文件：
<！doctype html> <html xmlns：th =“ http://www.thymeleaf.org”> <head> <head> <meta http-equiv =“ content-type” content-type =“ text/html; src =“ // cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </<script> <script> spript type =“ text/javascript”>/*<！[*/function postdata（） '＆date =' + $（'＃date'）。val（）; $ .ajax（{type：'post'，url：'/postData'，数据：数据，成功：function（r）{console.log（r）;}，error：function：function（）{alerr error！'error！'}}}）; }函数postjson（）{var data = {no：$（$（'＃no'）。val（），数量：$（'＃Quantity'）。val（），date：$（$（'＃date'）。val（）}; $ .ajax（{type：'post'，contentType：'application/json'，url：'/postjson'，data：json.stringify（data），成功：function（r）{console.log（r）;}，error：function：function（function（arter）{allod（errial！'rorry！''）}}}）; } /*]>* /< /script> < /head> <身体>否：<input ID =“ no” value =“ No.1234567890” /> <br /> Quantity：<input ID =“量化ID =” vortity“ valitity” value =“ 100” /> <br /> <br /> <br /> <br /> <br /> <br /> <dupt ID = <input ID =“ date value” date value =“ 2016-12-20” /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> onclick =“ postdata（）” /> <br /> <input value =“ postjson” type =“ button” onclick =“ postjson（）” /> < /> < /> < /> < /body> < /html>新建“ angularjs.html”文件：
<！doctype html> <html xmlns：th =“ http://www.thymeleaf.org”> <head> <head> <meta http-equiv =“ content-type” content-type“ content =” text/html; charset; charset; charset = utf-8 src =“ // cdn.bootcss.com/angular.js/1.5.6/angular.min.js"> </script>< <script> <script type =“ text/javascript”> var app = angular.module（'app'，'app'，[]）; app.controller（'maincontroller'，函数（$ rootscope，$ scope，$ http）{$ scope.data = {no：'no.1234567890'，数量：100，'日期'：'2016-12-20'}; 'post'，数据：$ scope.data}）。 id =“数量” ng-model =“ data.quantity” /> <br /> date：<input ID =“ date” ng-model =“ data.date” /> <br /> <br /> <input value =“ postjson” type =“ button” button =“ button” ng-click'ng-click =“ <div> {{Responsebody}} </div> </body> </html>项目结构如下图：
一、结合 jQuery
运行app.java后进去“ http：// localhost：8080/jquery”页面
点击“ PostData”按钮：：
jQuery成功的调用了spring mvc的后台方法“ public @Responsebody映射<字符串，object> postdata（字符串no，int dentity，string date）”
这里，“ date”参数我使用的是字符串类型，而并不是日期类型。因为大多数情况是使用对象形式来接收ajax客户端的值，所以我这里偷懒了
另外，使用，“胸腺”模板引擎在编写js时，“＆”关键字要特别注意，因为“胸腺thymeaf”模板引擎使用的是xml语法。因此
例如：
<script type =“ text/javascript”>/*<！[cdata [*/// javascript代码.../*]]>*/</script>
否则，运行“胸腺”模板引擎时就会出现错误“ org.xml.sax.saxparseexception：...”
点击“ Postjson”按钮：：
jQuery则成功调用了后台“ public @responsebody映射<字符串，object> postjson（@requestbody订单）”方法，
并且参数“订单”中的属性或字段也能被自动赋值，而日期类一样会被赋值。
注意的是：在使用jQuery的$ .ajax方法时，contentType参数需要使用“应用程序/json”，而后台spring mvc的“ postjson”方法中的“订单”参数也需要使用@requestbody注解。
二、结合 angularjs
进入“后进去http：// localhost：8080/angularjs”页面
点击“ Postjson”按钮：：
使用angularjs后，依然能调用，“ public @responsebody映射<string，object> postjson（@requestbody订单）”方法。
代码：https：//github.com/carter659/spring-boot-03.git
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。，也希望大家多多支持武林网。