在上篇的基礎上
準備工作：
修改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映射<字符串，object> postjson（@requestbody訂購訂單）”方法。
代碼：https：//github.com/carter659/spring-boot-03.git
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。 ，也希望大家多多支持武林網。