欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

玩轉(zhuǎn)spring boot 結(jié)合jQuery和AngularJs（3）

 更新時(shí)間：2017年01月04日 09:50:56   作者：劉冬  
玩轉(zhuǎn)spring boot，這篇文章主要介紹了結(jié)合jQuery和AngularJs，玩轉(zhuǎn)spring boot，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在上篇的基礎(chǔ)上

準(zhǔn)備工作：

修改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>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.4.2.RELEASE</version>
  </parent>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <java.version>1.8</java.version>
  </properties>


  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </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>

修改App.java

package com.github.carter659.spring03;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {
  
  public static void main(String[] args) {
    SpringApplication.run(App.class, args);
  }
  
}

新建“Order.java”類文件：

package com.github.carter659.spring03;
import java.util.Date;
public class Order {

  public String no;

  public Date date;

  public int quantity;
}

說明一下：這里我直接使用public字段了，get/set方法就不寫了。

新建控制器“MainController”：

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;

@Controller
public class MainController {

  @GetMapping("/")
  public String index() {
    return "index";
  }

  @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("no:" + no);
    System.out.println("quantity:" + quantity);
    System.out.println("date:" + date);
    Map<String, Object> map = new HashMap<>();
    map.put("msg", "ok");
    map.put("quantity", quantity);
    map.put("no", no);
    map.put("date", date);
    return map;
  }

  @PostMapping("/postJson")
  public @ResponseBody Map<String, Object> postJson(@RequestBody Order order) {
    System.out.println("order no:" + order.no);
    System.out.println("order quantity:" + order.quantity);
    System.out.println("order date:" + order.date.toInstant().atZone(ZoneId.systemDefault()).toLocalDate());
    Map<String, Object> map = new HashMap<>();
    map.put("msg", "ok");
    map.put("value", order);
    return map;
  }
}

新建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="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
  /*<![CDATA[*/
  function postData() {
    var data = 'no=' + $('#no').val() + '&quantity=' + $('#quantity').val()
        + '&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 : $('#quantity').val(),
      date : $('#date').val()
    };
    $.ajax({
      type : 'POST',
      contentType : 'application/json',
      url : '/postJson',
      data : JSON.stringify(data),
      success : function(r) {
        console.log(r);
      },
      error : function() {
        alert('error!')
      }
    });
  }
  /*]]>*/
</script>
</head>
<body>
  no:
  <input id="no" value="No.1234567890" />
  <br /> quantity:
  <input id="quantity" value="100" />
  <br /> date:
  <input id="date" value="2016-12-20" />
  <br />
  <input value="postData" type="button" 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>
<script src="http://cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<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.postJson = function() {
      $http({
        url : '/postJson',
        method : 'POST',
        data : $scope.data
      }).success(function(r) {
        $scope.responseBody = r;
      });

    }
  });
</script>
</head>
<body ng-app="app" ng-controller="MainController">
  no:
  <input id="no" ng-model="data.no" />
  <br /> quantity:
  <input id="quantity" 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>

項(xiàng)目結(jié)構(gòu)如下圖：

一、結(jié)合jquery

運(yùn)行App.java后進(jìn)去“http://localhost:8080/jquery”頁(yè)面

點(diǎn)擊“postData”按鈕：

jquery成功的調(diào)用了spring mvc的后臺(tái)方法“public @ResponseBody Map<String, Object> postData(String no, int quantity, String date)”

這里，“date”參數(shù)我使用的是String類型，而并不是Date類型。因?yàn)榇蠖鄶?shù)情況是使用對(duì)象形式來接收ajax客戶端的值，所以我這里偷懶了，就直接使用String類型。如果想使用Date類型，則需要使用@InitBinder注解，后面的篇幅中會(huì)講到，在這里就不再贅述。

另外，使用“thymeleaf”模板引擎在編寫js時(shí)，“&”關(guān)鍵字要特別注意，因?yàn)椤皌hymeleaf”模板引擎使用的是xml語法。因此，在<script>標(biāo)簽的開始——結(jié)束的位置要加“/*<![CDATA[*/ ...../*]]>*/”

例如：

<script type="text/javascript">
  /*<![CDATA[*/

    // javascript code ...


  /*]]>*/
</script>

否則，運(yùn)行“thymeleaf”模板引擎時(shí)就會(huì)出現(xiàn)錯(cuò)誤“org.xml.sax.SAXParseException:...”

點(diǎn)擊“postJson”按鈕：

jquery則成功調(diào)用了后臺(tái)“public @ResponseBody Map<String, Object> postJson(@RequestBody Order order)”方法，

并且參數(shù)“order”中的屬性或字段也能被自動(dòng)賦值，而Date類一樣會(huì)被賦值。

注意的是：在使用jquery的$.ajax方法時(shí)，contentType參數(shù)需要使用“application/json”，而后臺(tái)spring mvc的“postJson”方法中的“order”參數(shù)也需要使用@RequestBody注解。

二、結(jié)合angularjs

進(jìn)入“后進(jìn)去http://localhost:8080/angularjs”頁(yè)面

點(diǎn)擊“postJson”按鈕：

使用angularjs后，依然能調(diào)用“public @ResponseBody Map<String, Object> postJson(@RequestBody Order order)”方法。

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • SpringBoot通過yml和xml文件配置日志輸出方法

    SpringBoot通過yml和xml文件配置日志輸出方法

    這篇文章主要介紹了SpringBoot通過yml和xml文件配置日志輸出方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-04-04
  • Java中List排序的3種常見方法總結(jié)

    Java中List排序的3種常見方法總結(jié)

    在Java編程中List對(duì)象的排序是一個(gè)常見的需求,List接口提供了多種排序方法,這篇文章主要給大家介紹了關(guān)于Java中List排序的3種常見方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-08-08
  • springboot啟動(dòng)時(shí)運(yùn)行代碼詳解

    springboot啟動(dòng)時(shí)運(yùn)行代碼詳解

    在本篇內(nèi)容中我們給大家整理了關(guān)于在springboot啟動(dòng)時(shí)運(yùn)行代碼的詳細(xì)圖文步驟以及需要注意的地方講解，有興趣的朋友們學(xué)習(xí)下。
    2019-06-06
  • 避免sql注入_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

    避免sql注入_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

    這篇文章主要介紹了避免sql注入，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-08-08
  • 關(guān)于springmvc-servlet中的配置小知識(shí)詳解

    關(guān)于springmvc-servlet中的配置小知識(shí)詳解

    這篇文章主要介紹了關(guān)于springmvc-servlet中的配置小知識(shí)詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-12-12
  • SpringBoot整合Sharding-JDBC實(shí)現(xiàn)MySQL8讀寫分離

    SpringBoot整合Sharding-JDBC實(shí)現(xiàn)MySQL8讀寫分離

    本文是一個(gè)基于SpringBoot整合Sharding-JDBC實(shí)現(xiàn)讀寫分離的極簡(jiǎn)教程，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的可以了解一下
    2021-07-07
  • Java中的ConcurrentLinkedQueue松散隊(duì)列解析

    Java中的ConcurrentLinkedQueue松散隊(duì)列解析

    這篇文章主要介紹了Java中的ConcurrentLinkedQueue松散隊(duì)列解析,鏈表是松散的,鏈表節(jié)點(diǎn)并不都是有效的,允許存在無效節(jié)點(diǎn)val=null,但是只有最后一個(gè)節(jié)點(diǎn)才能next=null,需要的朋友可以參考下
    2023-12-12
  • Java源碼深度分析String與StringBuffer及StringBuilder詳解

    Java源碼深度分析String與StringBuffer及StringBuilder詳解

    當(dāng)對(duì)字符串進(jìn)行修改的時(shí)候，需要使用?StringBuffer?和?StringBuilder類，和String類不同的是，StringBuffer和?StringBuilder類的對(duì)象能夠被多次的修改，并且不產(chǎn)生新的未使用對(duì)象，本篇我們來分析分析它們的源碼
    2022-05-05
  • Java反射獲取class對(duì)象方式解析

    Java反射獲取class對(duì)象方式解析

    這篇文章主要介紹了Java反射獲取class對(duì)象方式解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-11-11
  • IDEA之啟動(dòng)參數(shù),配置文件默認(rèn)參數(shù)的操作

    IDEA之啟動(dòng)參數(shù),配置文件默認(rèn)參數(shù)的操作

    這篇文章主要介紹了IDEA之啟動(dòng)參數(shù),配置文件默認(rèn)參數(shù)的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2021-01-01

最新評(píng)論