Brinque com a bota de primavera combinada com jQuery e angularjs (3)

Autor：Eve Cole Data da Última Atualização：2025-06-13 17:16:02

在上篇的基础上

准备工作

修改 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/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.github.carter659</groupId> <artifactId>spring03</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name> spring03 </name> <url> http://maven.apache.org </url> <air> <puperid> org.springframework.boot </proupId> <TRARFACTID> spring-boot-starter-parent </artifactId> <versão> 1./1070> <Project.build.sourceEncoding> utf-8 </project.build.sourceEncoding> <nava.version> 1.8 </java.version> </properties> <inymAtiS> <spendency> <voundid> org.springFramework.BROOT </Groupid> <stifacty> primavera de primavera <Tringflorf-spring-Bring-Bring-Bring-Bring-Bring-TringStwork.Bring-STROTS </Groupid> <stifactid> primavera <vringFROTROTWORK.BROOT> <inymAtid> <TringFactid> Spring-Spring-Bring-Bring-BringFROTS-STROT-STROOT <IMATID> <TRATFACTID> </dependency> <pendency> <voundid> org.springframework.boot </foupiD> <TRATIFACTID> Spring-boot-devtools </ArtifactId> <cutional> TRUE </opcional> </dependency> </dependências> <frund> <flugins> <flugin> <plupId> ourg.springfringfame.Blame.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bring.Bilt> <flugin> <plupiM> <Puplum> ORG.SPRINGFRATROWROBROMBROTWRATROTH.BROTMOTW. <TarifactId> Spring-boot-maven-plugin </stifactId> </flugin> </plugins> </fruct> </project>

修改 App.java

 pacote com.github.carter659.spring03; importar org.springframework.boot.springApplication; importar org.springframework.boot.autoconfigure.springbootapplication; @springBootApplication {public.. STEPRINGSTATAppplication; args); }}

新建 “Order.java” 类文件：:

 pacote com.github.carter659.spring03; importar java.util.date; public class Ordem {public string no; data de data pública; Public int Quantidade;}

说明一下：这里我直接使用 público 字段了， Get/Set 方法就不写了。

新建控制器 “MainController”:

 pacote com.github.carter659.spring03; importar java.time.zoneid; importar java.util.hashmap; importar java.util.map; importar org.springframework.ntereotype.controller; import.springframework.web.bind.bind.antype.notation.notation; org.springframework.web.bind.annotation.postMapping; importar org.springframework.web.bind.annotation.requestbody; importar org.springframework.web.bind.annotation.ResponseBody; } @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 Quantity, String Date) {System.out.println ("Não:" + NO); System.out.println ("Quantidade:" + Quantidade); System.out.println ("Data:" + Data); Mapa <string, object> map = new hashmap <> (); map.put ("msg", "ok"); map.put ("quantidade", quantidade); map.put ("não", não); map.put ("data", data); mapa de retorno; } @PostMapping ("/postjson") Public @ResponseBody Map <String, Object> Postjson (@RequestBody Order Order) {System.out.println ("Order no:" + order.no); System.out.println ("Quantidade de ordem:" + order.quantity); System.out.println ("Data do pedido:" + order.date.toinstant (). Atzone (zoneid.systemDefault ()). Tolocaldate ()); Mapa <string, object> map = new hashmap <> (); map.put ("msg", "ok"); map.put ("value", ordem); mapa de retorno; }}

新建 jQuery.html 文件:

 <! Doctype html> <html xmlns: th = "http://www.thymeleaf.org"> <head> <meta http-equiv = "content-ttype" content = "text/html; charfset = utf-8"/> <title> jQuerys = "</title> src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></Script><script type =" text/javascript ">/*<! [CDATA [*/function postData () {var data = 'no' + + $ ('não). '& date =' + $ ('#date'). val (); $ .ajax ({type: 'post', url: '/postData', dados: dados, sucesso: function (r) {console.log (r);}, erro: function () {alert ('error!')}}); } função postjson () {var data = {não: $ ('#não'). val (), quantidade: $ ('#quantidade'). $ .ajax ({type: 'post', contentType: 'Application/json', url: '/postjson', dados: json.stringify (dados), sucesso: function (r) {console.log (r);}, erro: function () {alert ('erro!')}}}); } /*]]>* /< /script> </ad Head> <body> NO: <input id = "no" value = "No.1234567890" /> <r /> Quantity: <input ID = "Quantity" DUPT = "100" /> <r /> Date: <input id = "" value = "=" 2016-20-20-20 "" /> <> ONCLICK = "PostData ()" /> <r /> <insput 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"/> <tular> angular </angular </title> src = "// cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></Script><script type =" text/javascript "> var app = angular.module ('app', []); App.Controller ('MainController', função ($ Rootscope, $ SCOPE, $ HTTP) {$ SCOPE.DATA = {NO: 'No.1234567890', Quantity: 100, 'Date': '2016-12-20'}; Dados: $ scope.data}). Sucesso (função (r) {$ scope.ResponseBody = r;}); 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>{{responseBody}}</div></body></html>

项目结构如下图

一、结合 JQuery

运行 App.java 后进去 “http: // localhost: 8080/jQuery” 页面

点击 “PostData” 按钮：:

JQuery 成功的调用了 Spring MVC 的后台方法 “Public @ResponseBody Map <String, Object> PostData (String no, Int Quantity, String Date)”

这里， “data” 参数我使用的是 string 类型， date 类型。因为大多数情况是使用对象形式来接收 ajax 客户端的值，所以我这里偷懒了，就直接使用 string 类型。如果想使用 data 类型，则需要使用 @initbinder 注解，后面的篇幅中会讲到，在这里就不再赘述。

另外，使用 “tymeleaf” 模板引擎在编写 js 时， “&” 关键字要特别注意，因为 “tymeleaf” 模板引擎使用的是 xml 语法。因此，在 <cript> 标签的开始 ― ― 结束的位置要加结束的位置要加 “/*<! [CDATA [*/...../*]>*/”

例如

<script type = "text/javascript">/*<! [CDATA [*/// JavaScript Code .../*]]*/</script>

否则，运行 “tymeleaf” 模板引擎时就会出现错误 “org.xml.sax.saxparseException: ...”

点击 “Postjson” 按钮：:

JQuery 则成功调用了后台 “Public @ResponseBody Map <String, Object> Postjson (@Requestbody Order Order)” 方法，

并且参数 “Ordem” 中的属性或字段也能被自动赋值，而 Data 类一样会被赋值。

注意的是：在使用 jQuery 的 $ .AJAX 方法时， ContentType 参数需要使用 “Aplicativo/JSON” ，而后台 Spring MVC 的 “Postjson” 方法中的 “Order” 参数也需要使用 @Requestbody 注解。

二、结合 AngularJS

进入 “后进去 http: // localhost: 8080/angularjs” 页面

点击 “Postjson” 按钮：:

使用 AngularJS 后，依然能调用 “Public @ResponseBody Map <String, Object> Postjson (@requestbody Order Order)” 方法。

代码: https: //github.com/carter659/spring-boot-03.git

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。