5월 16일 (2) Spring - AJAX DB 연동

REST(REpresentational State Transfer) 방식

 = 비동기 전송 방식(지금 하고 있는 ajax방식의 다른 이름)

 

uri(url)를 통해 자원(데이터)을 명시하고, method(get/post)를 사용하여 해당 자원의 CRUD를 적용하는 방식.

REST 전송을 위해 jQuery 에서 구현한 것이 AJAX

 

Spring Framework에서는 REST 방식을 처리하는 Controller를 제공 -> RestController

1) 일반 Controller 사용 시 메소드에 @ResponseBody 어노테이션 사용

@GetMapping("idcheck")
    @ResponseBody
    //let sendObj = {"uid":inputId};
    public String idcheck(String uid){
        // DB를 검색하여 같은 uid 값이 있는 지 확인
        String result = mServ.idCheck(uid);

        return result;
    }

2) RestController에서는 @ResponseBody를 사용하지 않는다.(모든 메소드가 Rest 방식이기 때문) 

package com.raspberry.springajax2.controller;

import lombok.extern.java.Log;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@Log
public class RestMemberController {
    // 필요 시 Service 객체 주입 Autowired 활용
    // 일반 Controller와 동일
    @PostMapping("restSend")
    public String restSend(String indata){
        log.info("restSend()");
        log.info(indata);

        return "전송 확인";
    }
}

 

 

여러 데이터를 묶어서 전송

 

* Dto의 변수명이 "데이터"명

 

1) input 태그들의 값을 모아서 json 객체를 작성 후 전송

<h1>간단 계산기</h1>
<p>
    <input type="number" id="n1" placeholder="숫자 1 입력">
</p>
<p>
    <input type="number" id="n2" placeholder="숫자 2 입력">
</p>
<p>
    <input type="text" id="op" placeholder="연산기호(+, -, *, /)">
</p>
<p>
    <button id="send1">계산</button>
</p>

    $("#send1").click(function () {
        let num1 = $("#n1").val();
        let num2 = $("#n2").val();
        let oper = $("#op").val();

        // 데이터 묶음
        let sendObj = {
            "num1": num1,
            "num2": num2,
            "oper": oper
        }
        $.ajax({
            url: "calProc",
            type: "post",
            data: sendObj,
            success: function (result) {
                $("#res").html(result);
                console.log(result);
            },
            error: function (error) {
                alert("전송실패");
                console.log(error);
            }
        });
    });

2) form 태그로 묶어서 json 객체로 변환 후 전송

serialize 자바스크립트 활용

- serialize() : 폼데이터 직렬화 함수

<h2>serialize와 form을 활용한 묶음 전송</h2>
<form id="sendForm">
    <p>
        <input type="number" name="num1" placeholder="숫자 1 입력">
    </p>
    <p>
        <input type="number" name="num2" placeholder="숫자 2 입력">
    </p>
    <p>
        <input type="text" name="oper" placeholder="연산기호(+, -, *, /)">
    </p>
    <p>
        <button type="button" id="send2">계산</button>
    </p>
</form>
<p>
    계산 결과 : <span id="res"></span>
</p>

$("#send2").click(function (){
       //form 데이터를 가져와서 직렬화(json 객체화)
       const formData = $("#sendForm").serialize();
       console.log(formData);

        $.ajax({
            url: "calProc",
            type: "post",
            data: formData,
            success: function (result) {
                $("#res").html(result);
                console.log(result);
            },
            error: function (error) {
                alert("전송실패");
                console.log(error);
            }
        });
    });