Ajax - jQuery

minjjai·2022년 10월 7일

JavaScript ajax jquery

여행을 DAMDA - 멋쟁이사자처럼 백엔드 스쿨 1기 해커톤

목록 보기

10/10

Ajax

Asynchronous Javascript and XML

데이터의 비동기 처리 방식
페이지의 전환없이 http통신으로 데이터를 주고 받으며 화면상의 데이터를 업데이트 시켜준다.
페이지 재로딩없이 화면의 일부분만 최신 데이터로 갱신시킬 수 있는 개발방식

Ajax의 형태

$.ajax({
  		type: "get",
        url: "/ajax/test",
        data: {
            testNum: test_num,
            testString: test_string
        },
        datatype: "text",
        success: function (res) {
            console.log('성공, 결과 : ' + res);
        },
        error: function () {
            alert('실패');
        }
    });

Option

type

http 통신의 타입
get, post, put, delete 등

url

요청 url

data

요청시 보낼 파라미터 정보

datatype

요청 후 응답으로 받는 데이터의 타입
text, json ...

success

통신이 성공하면 실행되는 함수

error

통신 중 에러가 발생하면 실행되는 함수

Ex

예시 코드

Controller

@Controller
public class HomeController {

    @GetMapping("/ajax")
    public String ajaxTest() {
        return "ajax_test";
    }
    @GetMapping("/ajax/test")
    @ResponseBody
    public String getAjaxTest(@RequestParam("testNum") long testNum, @RequestParam("testString") String testString) {
        String result = String.valueOf(testNum) + testString;
        return result;
    }
}

ajax_test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax_test</title>
</head>
<body>
<button type="button" onclick="addBlock();">ajax</button>
<div class="ajax" style="display: flex;">

</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    var test_num = 5;
    var test_string = 'ajax';
    function addBlock() {
        $.ajax({
            type: "get",
            url: "/ajax/test",
            data: {
                testNum: test_num,
                testString: test_string
            },
            datatype: "text",
            success: function (res) {
                alert('test_num + test_string : ' + res);
                const html =
                    `
                    <div style="background-color: blue; margin: 5px; width: 100px; height: 100px;">
                    </div>
                    `;
                $('.ajax').append(html);
            },
            error: function () {
                alert('실패');
            }
        });
    }
</script>
</body>
</html>

코드 정리

위의 코드를 간단히 보면

localhost:8080/ajax로 접속하면 ajax_test.html을 로드하게 되어 있다.
ajax버튼을 누르면 /ajax/test url로 get 요청을 보내며, 동시에 파라미터로 script상에 있는 test_num과 test_string 변수를 각각 testNum, testString이라는 이름으로 보낸다.
반환되는 데이터 타입은 'text'이다.
성공시 console창에 응답으로 오는 문자열(testNum+testString)을 출력하고, 가로세로 100px인 파란색 사각형을 화면 상에 표시하도록 되어있다.