TIL

230322 [jQuery, Ajax] (데이터 주고받기)

하차모 2023. 3. 22. 17:29

AJAX : 서버와 브라우저가 비동기 방식으로 데이터를 주고받는 기술
- 동기 : 페이지 이동과 데이터 전송이 동시에 일어난다. (페이지 이동 + 데이터)
- 비동기 : 페이지 이동을 하지 않고 데이터 전송

 

jQuery는 자바스크립트를 쉽게 활용할 수 있도록 도와주는 라이브러리인데, AJAX 기술을 편하게 사용할 수 있도록 여러 메소드를 제공하고 있다. html 파일에서 body 태그가 끝나기 전에 아래의 script 태그를 추가하면 라이브러리 사용이 가능하다.

<!-- jQuery 라이브러리 로딩 -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>

 

AJAX 기본 문법

$.ajax({
    url: '', //요청경로
    type: '', //http 요청 방식
    data: {}, //필요한 데이터
    success: function(result) { //result : controller에서 반환한 값
        alert('ajax 통신 성공');
    },
    error: function() {
        alert('실패');
    }
});

 

1. 데이터 전송

1-1. Controller에서 javascript 파일로

 

(1) jquery_ajax.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <div>
        <input type="button" value="기본 자료형 데이터 받기" onclick="test1();">
        <input type="button" value="클래스 객체 데이터 받기" onclick="test2();">
        <input type="button" value="리스트 데이터 받기" onclick="test3();">
    </div>
    <div>
        <input type="button" value="기본 자료형으로 데이터 받기" onclick="test4();">
        <input type="button" value="커맨드 객체로 데이터 받기" onclick="test5();">
    </div>

<!-- Jquery 라이브러리 로딩 -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- 연결할 외부 javascript 파일 -->
<script type="text/javascript" src="/jquery_ajax.js"></script>
</body>
</html>

실습을 위해 html 파일과 javascript 파일을 생성하고 script 태그로 js 파일을 연결한다.

버튼 타입의 input 태그를 총 다섯 개 만들고 onclick 시 함수가 실행되게 한다.

 

1-1-1. 기본 자료형 데이터 받기

(2) jquery_ajax.js

// 기본 자료형 데이터 받기
function test1() {
    $.ajax({
        url: '/test/test1', //@RequestMapping("/test") @PostMapping("/test1")으로 이동
        type: 'post', //post 방식
        data: {}, //보낼 데이터 없음
        success: function(result) { //Controller에서 보낸 데이터를 result에 받음
            alert('ajax 통신 성공');
            alert(result); //alert 창에 띄움
        },
        error: function() {
            alert('실패');
        }
    });
}

 

(3) AjaxController.java

@Controller
@RequestMapping("/test")
public class AjaxController {
	//메인 페이지
	@GetMapping("/test")
	public String testMain() {
		return "jquery_ajax";
	}

	//@ResponseBody : ajax 통신을 위한 메소드이기 때문에 반환 값이 이동할 페이지로 쓰이지 않음
	@ResponseBody
	@PostMapping("/test1")
	public String test1() {
		return "hello"; //리턴 값이 success 함수의 매개변수 result에 담긴다.
	}
}

 

1-1-2. 객체 데이터 받기

(2) jquery_ajax.js

// 객체 데이터 받기
function test2() {
    $.ajax({
        url: '/test/test2',
        type: 'post',
        data: {},
        success: function(result) {
            alert('ajax 통신 성공');
            console.log(result); //StudentVO 객체 받음
            console.log(`이름 = ${result.stuName}, 나이 = ${result.stuAge}`)
        },
        error: function() {
            alert('실패');
        }
    });
}

(3) AjaxController.java

@ResponseBody
@PostMapping("/test2")
public StudentVO test2() {
    //객체 생성
    StudentVO vo = new StudentVO();
    vo.setStuNum(1);
    vo.setStuName("홍길동");
    vo.setStuAge(30);

    return vo;
}

 

1-1-3. 리스트 데이터 받기

(2) jquery_ajax.js

//리스트 데이터 받기
function test3() {
        $.ajax({
        url: '/test/test3',
        type: 'post',
        data: {},
        success: function(result) {
            alert('ajax 통신 성공');
            console.log(result); //리스트 데이터 받음

            for(const stu of result) { //for문으로 출력
                console.log(`이름 = ${stu.stuNum}`);
            }

        },
        error: function() {
            alert('실패');
        }
    });
}

(3) AjaxController.java

@ResponseBody
@PostMapping("/test3")
public List<StudentVO> test3() {
    //리스트 생성
    List<StudentVO> list = new ArrayList<>();

    for(int i = 0; i < 5; i++) {
        StudentVO vo = new StudentVO();
        vo.setStuNum(i + 1);
        vo.setStuName("자바_" + (i + 1));
        vo.setStuAge(10 * (i + 1));
        vo.setClassCode("CLASS_001");

        list.add(vo);
    }
    return list;
}

 

1-2. javascript 파일에서 controller로

1-2-1. 기본 자료형으로 데이터 받기

(2) jquery_ajax.js

//기본 자료형으로 데이터 받기
function test4() {
    $.ajax({
        url: '/test/test4',
        type: 'post',
        data: {'name' : 'java', 'age' : 20}, //보낼 데이터 {'이름' : 값}
        success: function(result) {
            alert('ajax 통신 성공');
        },
        error: function() {
            alert('실패');
        }
    });
}

(3) AjaxController.java

@ResponseBody
@PostMapping("/test4")
public void test4(String name, int age) {
    System.out.println(name);
    System.out.println(age);
}

 

1-2-2. 커맨드 객체로 데이터 받기

(2) jquery_ajax.js

//커맨드 객체로 데이터 받기
function test5() {
    $.ajax({
        url: '/test/test5',
        type: 'post',
        data: {'stuNum' : 1, 'stuAge' : 20, 'stuName' : '홍길동'}, //보낼 데이터
        success: function(result) {
            alert('ajax 통신 성공');
        },
        error: function() {
            alert('실패');
        }
    });
}

(3) AjaxController.java

@ResponseBody
@PostMapping("/test5")
public void test5(StudentVO vo) {//받은 데이터를 모두 담을 수 있는 커맨드 객체
    System.out.println(vo.getStuName());
    System.out.println(vo.getStuAge());
    System.out.println(vo.getStuNum());
}

 

저작자표시 비영리 (새창열림)

'TIL' 카테고리의 다른 글

220329 [Spring] (Interceptor)  (0) 2023.03.29
230321 [Javascript] (댓글 수정 기능)  (0) 2023.03.21
230320 [SQL, Spring] (페이징 처리)  (0) 2023.03.20
230317 [Spring, thymeleaf] (layout)  (0) 2023.03.17
230314 [Spring] (Model / 의존성 주입)  (0) 2023.03.14

'TIL'의 다른글

  • 현재글230322 [jQuery, Ajax] (데이터 주고받기)

관련글

티스토리툴바