在上篇的基础上
准备工作：
pom.xml
<Project XMLNS = "http://maven.apache.org/pom/4.0.0" xmlns：xsi = "http://www.w3.org/2001/xmlschema-instance" xsi：schemalocation = "http://maven.apach/4.0. http://maven.apache.org/xsd/maven-4.0.0.0.xsd "> <modelversion> 4.0.0 </modelversion> <groupid> com.github.carter659 </groupId> <artifactid> spring03 </artifactid> </0.1-snapshot </packaging> <name> spring03 </name> <url> http://maven.apache.org </url> <parent> <parent> org.springframework.boot </groupid> <artifactid> spring-boot-boot-starter-parent </artifactid> <バージョン> 1.4.2.2.Release </version </verion < <project.build.sourceencoding> utf-8 </project.build.sourceencoding> <java.version> 1.8 </java.version> </properties> <dependencies> <shiptencies> <mist depthency> </dependency> <dependency> groupid> org.springframework.boot </groupid> <artifactid> spring-boot-devtools </artifactid> <optional> true </optional> </dependency> </dependencies> <build> <blugins> <プラグイン<artifactid> spring-boot-maven-plugin </artifactid> </plugin> </plugins> </build> </project>
修改app.java
パッケージcom.github.carter659.spring03; import org.springframework.boot.springApplication; Import org.springframework.boot.autoconfigure.springbootapplication; args）; }}
新建“ Order.java”类文件：
パッケージcom.github.carter659.spring03; import java.util.date; public class order {public string no;公開日付;公共の数量;}说明一下：这里我直接使用public字段了、get/set方法就不写了。
新建控制器「MainController」：
パッケージ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.notation.getmapping; org.springframework.web.bind.annotation.postmapping; import org.springframework.web.bind.annotation.requestbody; import org.springframework.web.bind.annotation.responsebody; @controllerpublic class maincontroller { @getmapping opubl } @getMapping（ "/jquery"）public string jquery（）{return "jquery"; } @getMapping（ "/angularjs"）public string angularjs（）{return "angularjs"; } @postmapping（ "/postdata"）public @responsebody map <string、object> postdata（string no、int数量、string date）{system.out.println（ "no：" + no）; system.out.println（ "数量：" +数量）; System.out.println（ "date：" + date）; map <string、object> map = new Hashmap <>（）; map.put（ "msg"、 "ok"）; map.put（ "数量"、数量）; map.put（ "no"、no）; map.put（ "date"、date）;マップを返します。 } @postmapping（ "/postjson"）public @responsebody map <string、object> postjson（@requestbody order order）{system.out.println（ "order no：" + order.no）; System.out.println（ "Order数量：" + Order.Quantity）; system.out.println（ "注文日：" + order.date.toinstant（）。atzone（Zoneid.systemDefault（））。tolocaldate（））; map <string、object> map = new Hashmap <>（）; map.put（ "msg"、 "ok"）; Map.put（ "Value"、Order）;マップを返します。 }}新建jquery.html文件：
<！doctype html> <html xmlns：th = "http://www.thymeleaf.org"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <scriptタイプ=" text/javascript ">/*<！[cdata [*/function postdata（）{var data = 'no =' + $（ '＃' '＆date =' + $（ '＃date'）。val（）; $ .ajax（{type： 'post'、url： '/postdata'、data：data、success：function（r）{console.log（r）;}、error：function（）{alert（ 'error！'）}}）; } function postjson（）{var data = {no：$（ '＃no'）。val（）、数量：$（ '＃数量'）、date：$（ '＃date'）。val（）}}; $ .ajax（{type： 'post'、contentType： 'application/json'、url： '/postjson'、data：json.stringify（data）、success：function（console.log（r）;}、error：function（）{alert（ 'error！'）}}）; } /*]>* /< /< /scrip> < /head> <body> no：<入力ID = "no" value = "no.1234567890" /> <br />数量：<入力id = "数量"値= "100" /> <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> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> angularjs </title> < src = "// cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script> <script> <script>" text/javascript "> var app = angular.module（ 'app'、[]）; app.Controller（ 'MainController'、function（$ rotscope、$ scope、$ http）{$ scope.data = {no： 'no.1234567890'、数量：100、 '日付'： '2016-12-20'};データ：$ scope.data}）。成功（function（r）{$ scope.responsebody = r;}）; < /script> < /head> <body ng-app "ng-controller =" maincontroller "> no：<input id =" ng-model = "ng =" ng-model = "data.quantity" /> <br /> date：<input id = "date" ng-model = "data.date" /> <br /> <input value = "postjson" type = "button" ng-click = "postjson（）" /> <br /> <br /> <div> {responsedbody项目结构如下图：
一、结合 jQuery
运行app.java“ http：// localhost：8080/jquery”页面
点击「ポストダタ」按钮：
jquery成功的调用了spring mvc的后台方法“ public @responsebody map <string、object> postdata（string no、int数量、string date） "
这里、「日付」参数我使用的是文字列类型、而并不是日付类型。因为大多数情况是使用对象形式来接收ajax客户端的值、所以我这里偷懒了、就直接使用文字列类型。如果想使用日付类型、则需要使用@initbinder
另外、使用、「嫌がらんで」
例如：
<script type = "text/javascript">/*<！[cdata [*/// javascript code .../*]>*/</script>
否则、运行「ティメリーフ」模板引擎时就会出现错误 "org.xml.sax.saxparseexception：..."
点击「Postjson」按钮：
jQuery则成功调用了后台“ public @responsebody map <string、object> postjson（@requestbody order order）”方法、
并且参数「注文」中的属性或字段也能被自动赋值、而日付类一样会被赋值。
注意的是：在使用jQuery
二、结合角度
进入“ http：// localhost：8080/angularjs”页面
点击「Postjson」按钮：
AngularJs
代码：https：//github.com/carter659/spring-boot-03.git
以上就是本文的全部内容、希望对大家的学习有所帮助、也希望大家多多支持武林网。