2023.05.11 74일차 Project

74일차

전체 페이지를 로딩하는 것이 아니라 필요한 부분만 데이터를 주고받을 수 있다.
XMLHttpRequest객체 사용햇기때문에 xhr
fetch API, XHR직접사용, JQUERY라이브러리로 쉽게 사용하는 방법 등등이 잇다.

@ResponseBody로 데이터만 주기
$.ajax()

클라이언트와 서버가 페이지 로딩없이 주고받기

44. ajax 요청

크게 두가지 파라미터 url과 settings를 받는다.
또다른 방법은 파라미터를 settings만 넣는 것도있다.

settings를 잘 세팅하면 get방식 post방식 묶어보내기 등등이 가능하다.

두번째 버튼을 클릭하면 method2가 일할 수 있도록하기

<div>
    <button id="button2">get요청 /link2로</button>
</div>

---

$("#button2").click(function(){
    $.ajax("/sub34/link2");
})

---

@GetMapping("link2")
public void method2() {
    System.out.println("get 요청 link2");
}

44.1 부가적인정보

get방식 요청시 부가적인 정보를 보낼 수 잇엇다.
쿼리스트링으로 붙여서 보내는 것을 활용하는 것이다.

$("#button3").click(function(){
    $.ajax("/sub34/link3?name=son");
})

---

@GetMapping("link3")
public void method3(@RequestParam("name") String name) {
    System.out.println("link3 메소드가 일함");
    System.out.println("name: " + name);
}

44.2 requestparam-2

$("#button4").click(function(){
    $.ajax("/sub34/link4?address=고양시");
})

---

@GetMapping("link4")
public void method4(String address) {
    System.out.println("link4 메소드가 일함");
    System.out.println("address: " + address);
}

2가지 이상의파라미터를 받아보자

$("#button6").click(function(){
    $.ajax("/sub34/link6?food=밥&price=1000");
})

---

@GetMapping("link6")
public void method6(String food, Double price) {
    System.out.println("link6 메소드가 일함");
    System.out.println("food: " + food);
    System.out.println("price: " + price);
}

44.3 model attribute

하나씩 받아도되지만 javabean으로 받아도된다.

@Data
class Dto1 {
    private String address;
    private String name;
    private Integer age;
}

---

@GetMapping("link7")
public void method7(@ModelAttribute Dto1 dto) {
    System.out.println(dto);
}

---

$("#button7").click(function(){
    $.ajax("/sub34/link7?address=seoul&name=park&age=33");
})

연습

@Data
class Dto2 {
    private Double price;
    private String prodcut;
    private String category;
}

---

@GetMapping("link8")
public void method8(Dto2 dto) {
    System.out.println(dto);
}

---

$("#button8").click(function(){
    $.ajax("/sub34/link8?price=10000&prodcut=house&category=5");
})

45. post

post로 보내고 싶다면 두번째 파라미터인 settings를 잘 작성하면된다.
settings는 js객체이다.
자바스크립트의 객체는 {키:밸류} 키밸류쌍으로 작성하면된다.
키에는 accepts, type등등이 있다
type의 타입은 String이고 메소드(method)의 별칭이다. 기본값은 GET이고 post put get같은 값을 넣을 수있다.

$("#button1").click(function(){
    $.ajax("sub35/link1", {method:"post"});
})

---

@PostMapping("link1")
public void method1() {
    System.out.println("포스트 요청 잘 받음");
}

45.1 post - 1 연습

@PostMapping("link2")
public void method2() {
    System.out.println("메소드2 일함");
}

---

$("#button2").click(function() {
    $.ajax("/sub35/link2", { method: "post" });
})

45.2 post

get방식은 쿼리스트링으로 요청을 보내는데
post방식도 쿼리 스트링으로 받는 것은 가능하다.
하지만 post방식은 쿼리스트링에 붙여보내는게 아니라 몸통에 붙여보내야한다.
data 키에 담아서 보내면된다. data는 서버로 보내는 데이터이다.

@PostMapping("link3")
public void method3(String name) {
    System.out.println("name: " + name);
}

---

$("#button3").click(function() {
    $.ajax("/sub35/link3", {
        method: "post",
        data: "name=손"
    });
})

45.3 post 연습

link로 address requestparam받기

@PostMapping("link4")
public void method4(String address, Double price) {
    System.out.println("address: " + address);
    System.out.println("price: " + price);
}

---

$("#button4").click(function() {
    $.ajax("/sub35/link4", {
        method: "post",
        data: "address=고양시&price=99.77"
    });
})

45.4 dto post

@Data
static class Dto1 {
    private String name;
    private Double score;
    private String email;
}

---

@PostMapping("link5")
public void method5(Dto1 dto) {
    System.out.println(dto);
}

---

$("#button5").click(function() {
    $.ajax("/sub35/link5", {
        method: "post",
        data: "name=발&score=7.5&email=val@google.com"
    });
})

연습

@Data
static class Dto2 {
    private String address;
    private String product;
    private Double price;
}

---

@PostMapping("link6")
public void method6(Dto2 dto) {
    System.out.println(dto);
}

---

$("#button6").click(function() {
    $.ajax("/sub35/link6", {
        method: "post",
        data: "address=고양시&product=house&price=10000"
    });
})

46 ajax - JSON

AJAX의 태생은 XML데이터를 주고 받기 위한 것이었는데 XML을 사용하지 않게되어
JSON데이터를 주고 받는 역할을 하게 되었다.
그럼 JSON형식의 데이터는 무엇인가
https://www.oracle.com/kr/database/what-is-json/

JSON은 JavaScript 객체 리터럴, 배열, 스칼라 데이터를 표현하는 텍스트 기반의 방식이다.
즉 JSON은 텍스트이다.
JSON은 상대적으로 쉽게 읽고 작성할 수 있고, 소프트웨어에서 파싱 및 생성하기도 쉽다.

JSON은 JavaScript Object Notation(JSON) 자바스크립트 객체 형식으로 되어있다.
JSON은 {"프로퍼티": "값"} 으로 이루어진다. 여러 property는 ,로 구분한다.

46.1 JSON - 1

data키를 json형식으로 보내는 것이다.
서버에게 보내는 데이터가 json형식임을 알려줘야한다.
contentType키를 설정하면된다.

request header의 Content-Type을 JSON으로 보냈음을 인식하게 해줘야한다.

@PostMapping("link7")
public void method7() {
    System.out.println("메소드7 실행됨");
}

---

$("#button7").click(function() {
    $.ajax("/sub35/link7", {
        method: "post",
        data: '{"name":"son"}',
        contentType : "application/json"
    });
})

46.2 JSON - 2

컨트롤러에서 받는법은 @RequestBody 어노테이션을 붙이면된다.
@RequestBody Map이나 @RequestBody javaBean으로 받는다.
자바 map이 키=밸류이기때문에 map으로 받을 수 있는 것이다.

@PostMapping("link8")
public void method8(@RequestBody Map data) {
    System.out.println(data.get("address"));
    System.out.println(data.get("name"));
}

---

$("#button8").click(function() {
    $.ajax("/sub35/link8", {
        method: "post",
        contentType: "application/json",
        data: '{"address":"고양시", "name":"박지성"}'
    });
})

연습

@PostMapping("link9")
public void method9(@RequestBody Map data) {
    System.out.println(data.get("age"));
    System.out.println(data.get("name"));
    System.out.println(data.get("married"));
}

---

$("#button9").click(function() {
    $.ajax("/sub35/link9", {
        method: "post",
        contentType: "application/json",
        data: '{"age":26, "name":"park", "married": false}'
    });
})

46.3 JSON - 3

JSON 데이터 유형은 문자열, 숫자, boolean, Null, 객체, 배열이 있다.

객체 "프로퍼티" : {"프로퍼티":"값", "프로퍼티":"값"}
프로퍼티안에 프로퍼티:값들이 들어가게 할 수 있다.

배열 "프로퍼티" : ["값1", "값2"] 여러개의 값을 보낼 수 있다.

스프링이 알아서 값을 변환해서 까지 넣어준다.

// {"age":26, "name":"park", "married": false}
@PostMapping("link9")
public void method9(@RequestBody Map data) {
    System.out.println(data.get("age").getClass().getSimpleName()); //Integer
    System.out.println(data.get("name").getClass().getSimpleName()); //String
    System.out.println(data.get("married").getClass().getSimpleName()); //Booelan
}

46.4 JSON - 4

JSON을 굳이 타입을 적어준다면 프로퍼티는 String이고 값은 여러타입이 올 수 있으니
Map<String, Object> map 으로 받아야한다.

null 값의 json 데이터 전송을 해보자.

$("#button10").click(function() {
    $.ajax("/sub35/link10", {
        method: "post",
        contentType: "application/json",
        data: '{"address" : null, "age" : 30, "name":"손흥민"}'
    });
})

---

@PostMapping("link10")
public void method10(@RequestBody Map<String, Object> map) {
    System.out.println(map.get("address")); //null
    System.out.println(map.get("name")); //30
    System.out.println(map.get("age")); //손흥민
}

46.4 JSON - 5

객체를 전달해보자. 프로퍼티의 값에 프로퍼티:값형식인 객체가 들어가는 것이다.
map에 또다른 map이 들어가게 된다.
데이터를 활용하려면 map으로 받아서 사용해야한다.

잘 일어나지 않는다. 결론은 어떤 property의 값이 객체가 될 수 있다는 것만 알아두자.

$("#button11").click(function() {
    $.ajax("/sub35/link10", {
        method: "post",
        contentType: "application/json",
        data: '{"book": {"title":"java", "price":300}, "address":"seoul"}'
    });
})

---

@PostMapping("link11")
public void method11(@RequestBody Map<String, Object> map) {
    System.out.println(map); //{book={title=java, price=300}, address=seoul}
    System.out.println(map.get("book").getClass().getSimpleName()); //LinkedHashMap

    Map<String, Object> book = (Map<String, Object>) map.get("book");
    System.out.println(book.get("title")); //java
    System.out.println(book.get("price")); //300
}

46.5 JSON - 6

배열의 json을 받아보자.
property의 값이 배열형식으로 들어가게된다.
배열로 오면 List로 받으면된다.

$("#button12").click(function() {
    $.ajax("/sub35/link12", {
        method: "post",
        contentType: "application/json",
        data: '{"food" : ["pizza", "coke", "coffee"]}, "store" : "피자스쿨"'
    });
})

---

@PostMapping("link12")
public void method12(@RequestBody Map<String, Object> map) {
    System.out.println(map);

    ArrayList<Object> list = (ArrayList<Object>) map.get("food");
    for (Object food : list) {
        System.out.println(food);
    }
}

46.6 JSON-7

["pizza", "coke", "coffee"]의 형태로 값을 보낼수도 있는데 LIST로 받으면된다.

$("#button13").click(function() {
    $.ajax("/sub35/link13", {
        method: "post",
        contentType: "application/json",
        data: '["pizza", "coke", "coffee"]'
    });
})

---

@PostMapping("link13")
public void method13(@RequestBody List<String> list) {
    System.out.println(list);
}

46.7 JSON-8

각 배열안에 각 객체가 들어갈 경우
[{"name":"강백호", "pos":"파포"}, {"name":"서태웅", "pos":"스포"}]
List의 아이템이 Map이 되는 것이다.

$("#button14").click(function() {
    $.ajax("/sub35/link14", {
        method: "post",
        contentType: "application/json",
        data: '[{"name":"강백호", "pos":"파포"}, {"name":"서태웅", "pos":"스포"}]'
    });
})

---

@PostMapping("link14")
public void method14(@RequestBody List<Map<String, Object>> data) {
    System.out.println(data);
}

47. JSON.stringify()

JSON을 만들때 스트링으로 직접 작성하는 일은 없다.
특정데이터를 JSON으로 변환해서 사용한다.
즉 객체를 미리 만들어두고 JSON으로 변환해서 사용하게 된다.
자바스크립트의 JSON.stringify()메소드로 자바스크립트 값이나 객체를 json문자열로 변환해준다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

이전에 작성한 것들을 변환해보자.

$("#button7").click(function() {
    const obj = {name :"son"};

    $.ajax("/sub35/link7", {
        method: "post",
        data: JSON.stringify(obj),
        contentType: "application/json"
    });
})

---

$("#button8").click(function() {
    const data = {
        address: "고양시",
        name: "박지성"
    };

    $.ajax("/sub35/link8", {
        method: "post",
        contentType: "application/json",
        data: JSON.stringify(data)
    });
})

---

$("#button12").click(function() {
    const data = {
        food: [
            "pizza",
            "coke",
            "coffee"
        ],
        store: "피자스쿨"
    }

    $.ajax("/sub35/link12", {
        method: "post",
        contentType: "application/json",
        data: JSON.stringify(data)
        //data: '{"food" : ["pizza", "coke", "coffee"]}, "store" : "피자스쿨"'
    });
})

---

$("#button13").click(function() {
    const data = ["pizza", "coke", "coffee"];

    $.ajax("/sub35/link13", {
        method: "post",
        contentType: "application/json",
        data: JSON.stringify(data)
    });
})

---

$("#button14").click(function() {
    const data = [
        { "name": "강백호", "pos": "파포" },
        { "name": "서태웅", "pos": "스포" }
    ]
    $.ajax("/sub35/link14", {
        method: "post",
        contentType: "application/json",
        data : JSON.stringify(data)
    });
})

48. @RequestBody javaBean

스프링이 어노테이션을 보고 json형식의 데이터를 알아서 파싱해서
같은 이름의 property를 찾아서 타입변환까지 해서 javaBean에 넣어준다.

@Data
static class Dto1 {
    private String name;
    private Integer age;
}

---

@PostMapping("link1")
public void mehtod1(@RequestBody Dto1 dto) {
    System.out.println(dto);
}

---

$("#btn1").click(function() {
    const obj = {
        name: "정대만",
        age: 40
    }

    $.ajax("/sub36/link1", {
        method: "post",
        contentType: "application/json",
        data: JSON.stringify(obj)
    });
})

48.1 @RequestBody javaBean-2

@Data
static class Dto2 {
    private String name;
    private String email;
    private Double score;
    private Boolean married;
}

---

@PostMapping("link2")
public void mehtod2(@RequestBody Dto2 dto) {
    System.out.println(dto);
}

---

$("#btn2").click(function() {
    const obj = {
        name: "park",
        email: "park@naver.com",
        score: "90.98",
        married : false
    };

    $.ajax("/sub36/link2",{
        method : "post",
        contentType : "application/json",
        data: JSON.stringify(obj)
    });
})

48.2 @RequestBody javaBean-3

객체와 배열이 있는 json을 javaBean으로 받아보자.
배열은 역시나 List로 받으면된다.

@Data
static class Dto3 {
    private String name;
    private List<String> hobby;
}

---

@PostMapping("link3")
public void mehtod3(@RequestBody Dto3 dto) {
    System.out.println(dto);
}

---

$("#btn3").click(function() {
    const data = {
        name: "태웅",
        hobby: [
            "독서",
            "농구",
            "음악감상"
        ]
    };

    $.ajax("/sub36/link3", {
        method: "post",
        contentType: "application/json",
        data: JSON.stringify(data)
    });
})

48.3 @RequestBody javaBean-4

컨트롤러를 보고 예측해서 작성하기

@PostMapping("link4")
public void mehtod4(@RequestBody Dto4 dto) {
    System.out.println(dto.getPhone.get(2)); //값 출력
}

---

@Data
static class Dto4{
    private List<String> phone;
}

---

$("#btn4").click(function(){
    const data = {
        phone : [
            "갤럭시",
            "아이폰",
            "LG"
        ]
    }

    $.ajax("/sub36/link4", {
        method :"post",
        contentType : "application/json",
        data: JSON.stringify(data)
    });
})

48.4 @RequestBody javaBean-5

JSON의 값이 객체가 될 수 있다.
객체는 두가지 방법 Map이나 javaBean으로 받으면된다.

$("#btn5").click(function(){
    const data = {
        title : "java",
        publisher : "한빛",
        writer : {
            name: "정대만",
            age : 44
        }
    }

    $.ajax("/sub36/link5", {
        method :"post",
        contentType : "application/json",
        data: JSON.stringify(data)
    });
})

---

@Data
static class Dto5 {
    private String title;
    private String publisher;
    private Map<String, Object> writer;
    //private Writer writer;
}

---

@Data
static class Dto1 {
    private String name;
    private Integer age;
}

---

@PostMapping("link5")
public void mehtod5(@RequestBody Dto5 dto) {
    System.out.println(dto); // 값 출력
}

48.5 @RequestBody javaBean-6 연습

컨트롤러를 보고 다른 코드 작성하기

@PostMapping("link6")
public void mehtod6(@RequestBody Dto6 dto) {
    System.out.println(dto); // 값 출력
}

---

@Data
static class Dto6 {
    private String city;
    private Integer price;
    private Dto2 etc;
}

---

$("#btn6").click(function() {
    const data = {
        city: "고양시",
        price: 10000,
        etc: {
            name: "park",
            email: "park@gmail.com",
            score: 99.9,
            married: false
        }
    }

    $.ajax("/sub36/link6", {
        method: "post",
        contentType: "application/json",
        data: JSON.stringify(data)
    });
})

48.6 @RequestBody javaBean-7 연습

Dto1타입을 item으로 가지고 있는 List출력하기
객체들의 배열로 보내야한다.

@PostMapping("link7")
public void mehtod7(@RequestBody List<Dto1> dto) {
    dto.forEach(System.out::println);
}

---

$("#btn7").click(function() {
    const data = [
        {
            name: "park",
            age: 26
        },
        {
            name: "can",
            age: 1700
        },
        {
            name: "uni",
            age: 4
        }
    ]

    $.ajax("/sub36/link7", {
        method: "post",
        contentType: "application/json",
        data: JSON.stringify(data)
    });
})

49. input element

객체를 만들때 값을 직접 넣어보았는데 input element로 값을 넣어서 보내보자.

<input type="text" id="inputName" placeholder="이름" />
<br />
<input type="text" id="inputAge" placeholder="나이" />
<br />
<button id="btn8">input 전송</button>

---

$("#btn8").click(function() {
    const name = $("#inputName").val();
    const age = $("#inputAge").val();
    const data = {
        name : name,
        age : age
    };

    $.ajax("/sub36/link1", {
        method: "post",
        contentType: "application/json",
        data: JSON.stringify(data)
    });
})

49.1 input element- 2

@PostMapping("link2")
public void mehtod2(@RequestBody Dto2 dto) {
    System.out.println(dto);
}

---

$("#btn9").click(function() {
    const name = $("#inputName").val();
    const email = $("#inputEmail").val();
    const score = $("#inputScore").val();
    const married = $("#inputMarried").val();

    const data = {
        name : name,
        email : email,
        score : score,
        married : married
    }

    $.ajax("/sub36/link2", {
        method: "post",
        contentType: "application/json",
        data: JSON.stringify(data)
    });
})

client -> ajax request(json) ->server
client <- ajax response(json) <-server

2023.05.11

ajax의 값을 받아오는 방법을 배운다.
값을 받아와서 서비스에게 넘겨주고 mapper가 일을 하는 모습은 그려진다.
이것을 다시 response해서 view에 보여주는 방법을 배우면 사용법을 더 잘 이해할 것 같다.