Ajax 데이터 주고받기

14 Dec 2020 in Web Dev on Java Spring

◇ Ajax 포스팅 시리즈 ◇

ajax 사용 기본 설정

서버가 클라이언트 간에 비동기 통신을 가능하게 해주는 javascript library다.
페이지가 전환되지 않고, 데이터를 갱신한다.
사용 예시로는 검색어 쳤을 때 페이지가 바뀌지 않고 바로바로 추천 검색어가 나타내는 것이 있다.

라이브러리 사용을 위해 pom.xml에 dependency추가를 해준다.
https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind/2.12.0

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.12.0</version>
</dependency>

https://api.jquery.com/category/ajax/low-level-interface/ 이것만 제대로 쓸 수 있으면 된다.

요청보내기

@responseBody 가 키워드!
평소와 같이 controller의 method에 @RequestMapping 과 함께 ResponseBody를 써주면 return 의 string 이 .jsp를 반환하지 않고, 문자열 그 자체를 반환하게 된다!
- 이렇게 public과 string 사이에 @ResponseBody를 써주거나
```
@RequestMapping("/reqAjax1")
	public @ResponseBody String reqAjax1(){}
```
- RequestMapping 과 함께 써주면 된다.
```
@ResponseBody
@RequestMapping("/reqAjax1")
	public String reqAjax1(){}
```
페이지가 전환되지 않고 데이터가 화면에 나타난다.

1214aj1

요청보내기 1 - ajax 요청보내기

jsp파일. 화면에서 버튼을 누르면

<li>Ajax1 : <input id="reqBtn1" type = "button" value = "1.ajax 요청"><span id="req1" style = "color:red"></span></li>

다음과 같이 .on(‘click’,reqAjax1) 함수가 실행된다.

$(function(){
    $('#reqBtn1').on('click',reqAjax1);}

javascript function 인 reqAjax1과 controller function 인 reqAjax1 은 순서대로 서술하기 어렵다.
reqAjax에서는 $.ajax(url : ‘url’, method : ‘method’, success : ‘function’) 구조를 사용해 데이터를 서버에서 받는다.

대충 보았을 때, url과 method의 정보(클라이언트)로 controller에 있는 함수(서버)와 매칭이 되고, 서버에서 클라이언트 쪽으로 정보가 제대로 전달됐으면 success 문이 실행된다.

//클라이언트 쪽
function reqAjax1() {
    $.ajax({
        url:'reqAjax1'
        , method : 'GET'
        , success :  function(resp){
            if(resp =='cool'){
                $('#req1').text("전송받은 데이터 : " + resp)
            }
        }
    })
}

그러면 cool이라는 문자를 return 하게 되고, success

@ResponseBody 가 붙어있기 때문에, cool.jsp를 보여주는게 아니라 cool이라는 데이터를 반환해준다.

//서버 쪽
@Controller
public class AjaxController {
    @RequestMapping("/reqAjax1")
    public @ResponseBody String reqAjax1() {
        System.out.println("ajax 요청 도착!");
        return "cool";
    }

요청보내기 2 - 데이터 파라미터로 보내기(String)

위와 같은 패턴에, data:”name=”+name+’&phone=’+phone 를 추가해 서버에 데이터를 전달한다.

function reqAjax2() {
    var name = $("#username").val();
    var phone = $("#phone").val();
    if(name.trim() =='' || phone.trim()==''){
        alert('데이터를 입력해주세요')
        return;}

    //서버로 보낼 데이터 준비 : 파라미터로 만들기 . json 으로 만들기
    var sendData = "name="+name+'&phone='+phone;
    $.ajax({
        url:'reqAjax2'
        , method : 'POST'
        , data: sendData
        , success :function(resp){}
    })
}

data로 넘긴 정보에 변수명 두개, name과 phone 이 있었다. 이걸 이렇게 param으로 받아준다.

@RequestMapping(value="/reqAjax2", method=RequestMethod.POST)
public @ResponseBody String reqAjax2(String name, String phone) {
    System.out.println("ajax 요청 도착!"+name +"," + phone);
    return "success";
}

요청보내기 3 - JSON으로 보내기 (String으로 받기)

data를 string 이 아닌 JSON 데이터로 보낸다.

이렇게 보내면, 서버쪽에서 param으로 받는다. map으로 안 받고

var sendData = {"name":name,"phone":phone}
//json 은 key를 반드시 큰 따옴표로 해줘야한다. 작은 따옴표 안됨.
$.ajax({
    url:'reqAjax2'
    , method : 'POST'
    , data: sendData
    ,  success :function(resp){
        var respData = "이름 : " + resp["name"]+", 전화번호 : "+ resp["phone"]
        $("#req2").html(respData);
    }
})
}

클라이언트에서 받은 정보를 서버에서 map에 넣어서 다시 반환한다. 그럼 그 정보를 처리할 수 있게 위 함수 success: function(resp)에서 정보를 풀어서 화면에 넣어준다. 여기서 resp는 당연 map타입이다.

@ResponseBody
@RequestMapping(value="/reqAjax2", method=RequestMethod.POST)
public Map<String,String> reqAjax2(String name, String phone) {
    System.out.println("ajax 요청 도착!"+name +"," + phone);
    Map<String,String> map = new HashMap<String,String>();
    map.put("name",name);
    map.put("phone",phone);
    return map;
}

요청보내기 4 - JSON으로 보내기 (map으로 받기)

map으로 받기 위해서, 요청을 보낼때와 받을 때 추가 작업을 해줘야한다.

$.ajax 안에 , contentTpye과 dataType을 추가로 넣어주고, 데이터도 JSON.stringify() 안에 넣어 보낸다.

function reqAjax2() {
    var name = $("#username").val();
    var phone = $("#phone").val();
    if(name.trim() =='' || phone.trim()==''){
        alert('데이터를 입력해주세요')
        return;}
    //서버로 보낼 데이터 준비 : 파라미터로 만들기 . json 으로 만들기
    var sendData = {"name":name,"phone":phone}
    $.ajax({
        url:'reqAjax2'
        , method : 'POST'
        , data: JSON.stringify(sendData)
        ,contentType : 'application/json; charset=UTF-8'
        ,dataType : 'json'
        , success :function(resp){
            alert( JSON.stringify(sendData))
        }
    })
}

받은 쪽에서도 추가작업이 필요하다. @RequestBody param에 붙여줘야지 jsp에서 넘어온 json 데이터를 무사히 받을 수 있다.!

@ResponseBody
@RequestMapping(value="/reqAjax2", method=RequestMethod.POST)
public Map<String,String> reqAjax2(@RequestBody Map<String,String> map ) {
    System.out.println(map);
    return map;
}

요청보내기 5 - vo로 보내기

링크를 클릭하면 javascript의 특정 함수가 실행되게 하기 위해 a href 다음 “javascript:함수명()” 이렇게 쓰면된다.

<li>Ajax 3 (VO)<br>
    <a href ="javascript:reqAjax3()">VO데이터 수신</a><br>
    <span id ="req3" style = "color : red"></span>

그러면 다음의 js 함수가 호출된다. url와 method는 서버의 어떤 함수로 가야하는지 알려주고, 그 함수를 갔다 온 후 성공실패를 success 를 통해 알 수 있다.

function reqAjax3() {
    $.ajax({
        method : 'GET',
        url:'reqAjax3',
        success : function(resp){
            var respData = "replyseq : " + resp["replyseq"]+", boardseq : "+ resp["boardseq"]+", userid : "+ resp["userid"]+", replytext : "+ resp["replytext"]+", regdate : "+ resp["regdate"];
            $("#req3").html(respData);
        }
    })
}

다음과 같이 서버에서 객체의 값을 넣는다. 이걸 위 함수 success의 resp로 받는다. 비록 객체로 서버에서 전송을 했지만, JSON 타입으로 전송이 온다!

@ResponseBody
@RequestMapping("/reqAjax3")
public  Reply reqAjax3(String name, String phone) {
    Reply reply = new Reply();
    reply.setBoardseq(1);
    reply.setRegdate(new Date().toString());
    reply.setReplytext("댓글입니다.");
    reply.setUserid("hong");
    return reply;
}

응답 받기1 - VO보내고 VO리스트 받기

앞의 예시들은 클라이언트에서 요청을 보내고 서버에서 요청을 받는데 집중했다.
이번에는 서버에서 온 응답을 받는 것을 볼 것이다.
서버에서 리스트를 받아 화면에 출력하는 예제
왼 - 버튼 누르기 전, 오- 버튼 누른 후

javascript 코드

요청보내기 4번 에서 나온 것과 같이 객체를 보낸다.
서버에서 응답 받으면 success : 후 코드가 실행된다.
$.each 문을 사용해 리스트의 객체들을 하나씩 꺼내주고, 그걸 table에 나타나게 해준다.

function reqList() {
    //서버로 보낼 데이터 준비 : 파라미터로 만들기 . json 으로 만들기
    var sendReply = {"regdate":"2020/12/21","replytext":"I am so cute!","userid":"pin","replyseq":"1"}
    $.ajax({
        url:'reqList'
        , method : 'POST'
        , data: JSON.stringify(sendReply)
        ,contentType : 'application/json; charset=UTF-8'
        ,dataType : 'json'
        , success :output
    })
}
function output(resp){
    var result = '';
    result +='<table border="1">'
    result +='<tr><th>글쓴이</th><th>댓글내용</th><th>글쓴날</th></tr>'
    $.each(resp,function(index,item){
        result +='<tr><td>'+item["userid"]+'</td>'
        result +='<td>'+item["replytext"]+'</td>'
        result +='<td>'+item["regdate"]+'</td></tr>'
    })
    result +='</table>'
    $(resultList).html(result)
}

서버에서 list 에 add하고, return 하는 코드. requestBody를 넣어서 json 데이터를 받을 수 있게 한다.

@ResponseBody
@RequestMapping(value="/reqList", method=RequestMethod.POST)
public List<Reply> reqList(@RequestBody Reply reply ) {
    List<Reply> list = new ArrayList<Reply>();
    list.add(reply);
    list.add(new Reply(2,1,"김","김먹고싶다","2020/12/12"));
    list.add(new Reply(3,1,"이","이상해","2020/12/12"));
    list.add(new Reply(4,1,"박","박수쳐","2020/12/13"));
    list.add(new Reply(5,1,"최","최근에","2020/12/14"));
    list.add(new Reply(6,1,"조","조조영화","2020/12/15"));
    return list;
}

Ajax 데이터 주고받기

ajax 사용 기본 설정

요청보내기

요청보내기 1 - ajax 요청보내기

요청보내기 2 - 데이터 파라미터로 보내기(String)

요청보내기 3 - JSON으로 보내기 (String으로 받기)

요청보내기 4 - JSON으로 보내기 (map으로 받기)

요청보내기 5 - vo로 보내기

응답 받기1 - VO보내고 VO리스트 받기

Yeji 'Callie'

Error

ajax 사용 기본 설정

요청보내기

요청보내기 1 - ajax 요청보내기

요청보내기 2 - 데이터 파라미터로 보내기(String)

요청보내기 3 - JSON으로 보내기 (String으로 받기)

요청보내기 4 - JSON으로 보내기 (map으로 받기)

요청보내기 5 - vo로 보내기

응답 받기1 - VO보내고 VO리스트 받기

Templates (for web app):

Error