在上篇的基础上
准备工作 ：
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.apache.org/pom/0.0.0.0 http://maven.apache.org/xsd/maven-4.0.xsd "> <modelversion> 4.0.0 </modelversion> <groupid> com.github.carter659 </groupid> <artifactid> spring03 </artifactid> <버전> 0.0.1-1-1-snapshot> <이름> Spring03 </name> <Url> http://maven.apache.org </url> <부모> <periD> org.springframework.boot </groupid> <artifactid> spring-boot-starter-parent </artifactid> <version> 1.2.20 </parent> <properties> <project.build.sourceencoding> utf-8 </project.build.sourceencoding> <java.version> 1.8 </java.version> </properties> <pecientency> <groupid> org.spramework.spramework.spramework.sprameword> spring-hoot-starter-starter-stimelebe- spring-stimelebe- spring-theMelege-starter-stiMelege </의존성> <pectionency> <groupid> org.springframework.boot </groupid> <artifactid> spring-boot-devtools </artifactid> <seleptional> true </옵션> </dependency> </fexendencies> <flugins> <groupin> <groupin> org.springframework.springframework.boot. <Artifactid> Spring-Boot-Maven-Plugin </artifactid> </plugin> </plugins> </build> </project>
app.java
package com.github.carter659.spring03; import org.springframework.springApplication; import org.spramewort.autoconfigure.springbootApplication; @springbootApplicationPublic class app {public static void main (String) {spring -closcation.); }}新建“Order.java”类文件 ：
패키지 com.github.carter659.spring03; import java.util.date; public class order {public string no; 공개 날짜; 공개 int 수량;}说明一下 ： 这里我直接使用 공개 字段了, get/set 方法就不写了。 方法就不写了。
新建控制器“MainController”：
패키지 com.github.carter659.spring03; import java.time.zoneid; import java.util.hashmap; import java.util.map; import org.springframework.stereotyp.controller; import org.spramework.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 maincontroller {@getmapping ( "/")); } @getMapping ( "/jQuery") public String jQuery () {return "jQuery"; } @getMapping ( "/AngularJs") public String AngularJs () {return "AngularJs"; } @postmapping ( "/postData") public @ResponseBody map <string, object> postData (문자열 번호, int 수량, 문자열 날짜) {system.out.println ( "no :" + no); System.out.println ( "수량 :" + 수량); System.out.println ( "날짜 :" + 날짜); map <string, object> map = new Hashmap <> (); map.put ( "msg", "ok"); map.put ( "수량", 수량); map.put ( "아니오", 아니오); map.put ( "날짜", 날짜); 리턴 맵; } @postmapping ( "/postjson") public @responsebody map <string, object> postjson (@requestbody order order) {system.out.println ( "order no :" + order.no); System.out.println ( "주문 수량 :" + 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> jquery </title> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script 유형 ="text/javaScript ">/*<! '& 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 (), 수량 : $ ( '#quantity'). val (), 날짜 : $ ( '#date'). val ()}; $ .ajax ({type : 'post', contenttype : 'application/json', url : '/postjson', data : json.stringify (data), success : function (r) {console.log (r);}, error () {alert ( 'error!')}); } /*]]]]>* /< /script> < /script> < /head> <body> 아니요 : <입력 ID = "NO"value = "No.1234567890" /> <br /> 수량 : <입력 ID = "수량"value = "100" /> 날짜 : <input id = "date"value = "2016-12-20" /> <br /> onclick = "postData ()" /> <br /> <입력 값 = "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 유형 ="text/javascript "> var app = angular.module ( 'app', []); app.controller ( 'maincontroller', function ($ rootscope, $ scope, $ http) {$ scope.data = {no : 'no.1234567890', Quantity : 100, 'date': '2016-12-20'}; $ scope.postjson = function () {$ htp (urll :/postjson ' : $ scope.data}). 성공 (함수 (r) {$ scope.responsebody = r;}); < /script> < /head> <app "ng-controller ="MainController "> no : <input id ="no "ng-model ="data.no ". ng-model = "data.quantity" /<br /> date : <input id = "date"ng-model = "data.date" /> <br /> <input value = "postjson"type = "ng-click ="postjson () "" /> <br /> <br /> <div> {repaskbody}} < /html>项目结构如下图 ：
jQuery
运行 app.java 后进去“http : // localhost : 8080/jquery”页面
点击“postdata”按钮 ：
jQuery m Spring MVC 的后台方法“public @ResponseBody Map <String, Object> PostData (문자열 번호, int 수량, 문자열 날짜)”
这里, "날짜"参数我使用的是 줄 类型 类型 类型, 而并不是 날짜 类型。因为大多数情况是使用对象形式来接收 날짜 类型。因为大多数情况是使用对象形式来接收 ajax 客户端的值 客户端的值, 所以我这里偷懒了 所以我这里偷懒了, 就直接使用 문자열 类型。如果想使用 날짜 类型 类型 类型, @initbinder 注解, 后面的篇幅中会讲到, 后面的篇幅中会讲到 在这里就不再赘述。 在这里就不再赘述。
另外 另外, 使用 使用“thymeleaf”模板引擎在编写 js 时 时,“&”关键字要特别注意 关键字要特别注意, 因为“thymeleaf”模板引擎使用的是 xml 语法。因此 语法。因此, <cript> 标签的开始 标签的开始 标签的开始 标签的开始 - ― ― - ―“/*<! [cdata [*/...../*]]>*/”
例如 ：
<script type = "text/javaScript">/*<!
否则 否则, 运行“Thymeleaf”模板引擎时就会出现错误“org.xml.sax.saxparseexception : ...”
点击“Postjson”按钮 ：
jQuery public“public @responsebody map <string, object> postjson (@requestbody 주문)”方法,
并且参数“주문”””, 而 날짜 类一样会被赋值。
注意的是 ： JQuery 的 $ .ajax 方法时 方法时, Contenttype 参数需要使用“Application/JSON”, 而后台 Spring MVC 的“PostJson”方法中的“주문”参数也需要使用 @requestbody 注解。
angularjs
进入“t http : // localhost : 8080/angularjs”页面
点击“Postjson”按钮 ：
使用 angularjs ular, 依然能调用“public @responsebody map <string, object> postjson (@requestbody 주문)”
： ： https : //github.com/carter659/spring-boot-03.git
以上就是本文的全部内容 以上就是本文的全部内容, 希望对大家的学习有所帮助, 也希望大家多多支持武林网。