在上篇的基础上
准备工作:
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
以上就是本文的全部内容、希望对大家的学习有所帮助、也希望大家多多支持武林网。