spring boot 를 jQuery 와 AngularJs 와 결합 하기(3)

10984 단어 springbootjQueryAngularJs
상편 의 기초 위 에서
준비 작업:
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="//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="//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>
프로젝트 구 조 는 다음 그림 과 같다.

jquery
App.java 를 실행 하고 들 어 갑 니 다."http://localhost:8080/jquery페이지
"postData"단 추 를 누 르 십시오:

jquery 는 spring mvc 의 배경 방법"Public@ResponseBody MappostData(String no,int quantity,String date)"를 성공 적 으로 호출 하 였 습 니 다.
여기 서"date"인 자 는 Date 형식 이 아니 라 String 형식 을 사용 합 니 다.대부분의 경우 대상 형식 으로 ajax 클 라 이언 트 의 값 을 받 기 때문에 게 으 름 을 피 우 면 String 형식 을 직접 사용 합 니 다.Date 형식 을 사용 하려 면@InitBinder 주 해 를 사용 해 야 합 니 다.뒤에 있 는 지면 에서 설명 할 것 입 니 다.여기 서 더 이상 군말 하지 않 겠 습 니 다.
또한"thymeleaf"템 플 릿 엔진 을 사용 하여 js 를 작성 할 때"&"키 워드 는 특히 주의해 야 합 니 다."thymeleaf"템 플 릿 엔진 은 xml 문법 을 사용 하기 때 문 입 니 다.따라서태그 의 시작-끝 위치 에'/**/”
예 를 들 면:

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

    // javascript code ...


  /*]]>*/
</script>
그렇지 않 으 면"thymeleaf"템 플 릿 엔진 을 실행 할 때 오류 가 발생 합 니 다."org.xml.sax.SAXParseException:..."

"postJSon"단 추 를 누 르 십시오:

jquery 는 배경"Public@ResponseBody MappostJSon(@RequestBody Order order)"방법 을 성공 적 으로 호출 하 였 습 니 다.
또한 인자'order'의 속성 이나 필드 도 자동 으로 할당 되 며,Date 클래스 와 마찬가지 로 할당 됩 니 다.
주의:jquery 의$.ajax 방법 을 사용 할 때 contentType 인 자 는"application/json"을 사용 해 야 하 며,배경 spring mvc 의"postJSon"방법 중의"order"인 자 는@RequestBody 주 해 를 사용 해 야 합 니 다.
2.angularjs 결합
들어가다http://localhost:8080/angularjs페이지
"postJSon"단 추 를 누 르 십시오:

angularjs 를 사용 한 후에 도"Public@ResponseBody MappostJSon(@RequestBody Order order)"방법 을 호출 할 수 있 습 니 다.
코드:https://github.com/carter659/spring-boot-03.git
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
spring boot 빠르게 시작 하기(1)
spring boot 를 돌려 AngularJs 와 JDBC 를 결합 합 니 다(4)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage