在上篇的基础上
： ：
修改 pom.xml
<project xmlns = "http://maven.apache.org/pom/4.0.0" http://maven.apache.org/xsd/maven-4.0.0.xsd "> <Dodeversion> 4.0.0 </modelversion> <roupiD> com.github.carter659 </groupiD> <StifactId> spring03 </artifactid> <name> spring03 </same> <Url> http://maven.apache.org </url> <inpart> <paretId> org.springframework.boot </rougiD> </parent> </protire> propister> protic-protter </shintifactid> <project.build.sourceencoding> utf-8 </project.build.sourceencoding> <java.version> 1.8 </java.version> </properties> <ependencies> <reperency> <rouciD> org.springframework.boot </grouptid> </reperency> <reperency> <roupiD> org.springframework.boot </rougiD> <StifactId> spring-boot-devtools </suntifactid> <peciptial> true </perical> </perendency> </reperency> <StifactId> Spring-Boot-Maven-Plugin </stifactid> </sultwing> </sults> </build> </project>
修改 app.java
package com.github.carter659.spring03 ؛ استيراد org.springframework.boot.springapplication ؛ استيراد org.SpringFramework.boot.autoconfigure.springblication args) ؛ }}
新建 "order.java" ： ：
package com.github.carter659.spring03 ؛ import java.util.date ؛ Order public order {public string no ؛ تاريخ التاريخ العام ؛ كمية الباحث العام ؛}： ： public 字段了 ， get/set 方法就不写了。
： "MainController" ：
package com.github.carter659.spring03 ؛ import java.time.zoneid ؛ import java.util.hashmap ؛ import java.util.map ؛ استيراد org.springframework.stereotype.controller org.springframework.web.bind.annotation.postmapping ؛ استيراد org.springframework.web.bind.annotation.requestbody ؛ استيراد org.springframework.web.annotation.responseDonder ؛ controllerpublic class maincontroller } getMapping ("/jQuery") السلسلة العامة jQuery () {return "jQuery" ؛ } getMapping ("/AngularJS") السلسلة العامة angularjs () {return "AngularJs" ؛ } postmapping ("/postdata") publicResponsebody Map <String ، Object> postData (سلسلة No ، int ، تاريخ السلسلة) {system.out.println ("no:" + no) ؛ System.out.println ("الكمية:" + الكمية) ؛ System.out.println ("التاريخ:" + التاريخ) ؛ الخريطة <string ، Object> map = new HashMap <> () ؛ map.put ("msg" ، "ok") ؛ map.put ("الكمية" ، الكمية) ؛ map.put ("لا" ، لا) ؛ map.put ("التاريخ" ، التاريخ) ؛ خريطة العودة } postmapping ("/postjson") publicResponsebody Map <String ، Object> postjson (reder order rederderbody) {system.out.println ("Order no:" + order.no) ؛ system.out.println ("كمية الطلب:" + order.quantity) ؛ system.out.println ("تاريخ الطلب:" + order.date.toinstant (). atzone (ZoneId.SystemDefault ()). tolocaldate ()) ؛ الخريطة <string ، Object> map = new HashMap <> () ؛ map.put ("msg" ، "ok") ؛ map.put ("القيمة" ، الترتيب) ؛ خريطة العودة }}新建 jquery.html 文件:
<! doctype html> <html xmlns: th = "http://www.thymeleaf.org"> <head> <meta http-equiv = "content-type" contct = "text/html ؛ src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script type =" text/javaScript ">/*<! '& date =' + $ ('#date'). val () ؛ $ .ajax ({type: 'post' ، url: '/postData' ، البيانات: البيانات ، النجاح: الدالة (r) {console.log (r) ؛} ، الخطأ: function () {erlert ('error!')}}) ؛ } الوظيفة postjson () {var data = {no: $ ('#no'). val () ، الكمية: $ ('#الكمية'). val () ، التاريخ: $ ('#date'). val ()} ؛ $ .ajax ({type: 'post' ، contentType: 'application/json' ، url: '/postjson' ، data: json.stringify (data) ، success: function (r) {console.log (r) ؛} ، error: function () {enlert ('error!')}}) ؛ } /*]]>* /< /script> </head> <body> no: <input id = "no" value = "No.1234567890" /> <br /> الكمية: <input id = "Quantity" value = "100" /> <br /> التاريخ: <input id = "date" value = "2016-12-20" /> 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 src = "// cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script> type =" 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.data}). النجاح (R) {$ scope.responseBody = r ؛}) ؛ ng-model = "data.quantity" /> <br /> التاريخ: <input id = "date" ng-model = "data.date" /> <br /> <input： ：
一、结合 jQuery
运行 app.java 后进去 "http: // localhost: 8080/jQuery" 页面
点击 "postdata" ：
jQuery 成功的调用了 Spring MVC 的后台方法 "Public ResponseBody Map <String ، Object> postData (سلسلة No ، int ، تاريخ السلسلة)"
这里 ， "التاريخ" 参数我使用的是 سلسلة 类型 ， 而并不是 التاريخ 类型。因为大多数情况是使用对象形式来接收 ajax 客户端的值 ， 所以我这里偷懒了 ， 就直接使用 类型。如果想使用 التاريخ 类型 ， 则需要使用 initbinder 注解 ， 后面的篇幅中会讲到 ， 在这里就不再赘述。
另外 ， 使用 "thymeleaf" 模板引擎在编写 JS 时 ， "&" 关键字要特别注意 ， 因为 因为 因为 因为 因为 因为 因为 模板引擎使用的是 xml 语法。因此 ， 在 <script> 标签的开始 ― ― 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加 结束的位置要加
： ：
<script type = "text/javaScript">/*<!
否则 ， 运行 "thymeleaf" 模板引擎时就会出现错误 "org.xml.sax.saxparseException: ..."
点击 "postjson" ：
jQuery 则成功调用了后台 "PublicResponseBody Map <String ، Object> postjson (reported order order)" 方法 ，
并且参数 "الطلب" 中的属性或字段也能被自动赋值 ， 而 تاريخ 类一样会被赋值。
： ： 在使用 jQuery 的 $ .ajax 方法时 ， contentType 参数需要使用 "application/json" ， 而后台 spring mvc 的 "postjson" 方法中的 "order"
二、结合 AngularJS
进入 "后进去 http: // localhost: 8080/AngularJS" 页面
点击 "postjson" ：
使用 AngularJS 后 ， 依然能调用 "خريطة public @responsebod
： https: //github.com/carter659/spring-oot-03.git
以上就是本文的全部内容 ， 希望对大家的学习有所帮助 ， 也希望大家多多支持武林网。