티스토리 뷰

SCIT/8월

8/7 [Ajax] Test1(1)

Seraphim_ 2024. 8. 7. 17:51

[ AJAX ]

AJAX(Asynchronous JavaScript and XML)는 웹 페이지에서 서버와 비동기적으로 데이터를 주고받을 수 있게 해주는 기술

AJAX를 사용하면 웹 페이지를 새로 고치지 않고도 서버와 데이터를 주고받을 수 있으며, 이를 통해 더 빠르고 사용자 친화적인 웹 애플리케이션을 만들 수 있다.

 

1. home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HOME</title>
    <link rel="stylesheet" th:href="@{/static/css/styles.css}">
</head>
<body>
<div class="container">
    <h1>[ Ajax 예제 ]</h1>

    <p><a href="ajax1">Ajax Test Page 1</a></p>
    <p><a href=""></a></p>
    <p><a href=""></a></p>
</div>
</body>
</html>

 

2. HomeController.java

package net.datasa.test_ajax;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
@Slf4j
public class HomeController {

    @GetMapping({"", "/"})
    public String home() {
        return "home";
    }
}

 

3. ajax1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Test 1</title>
    <link rel="stylesheet" th:href="@{/static/css/styles.css}">
    <script th:src="@{/static/jq/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/static/js/test1JS.js}"></script>
</head>
<body>
<div class="container">
    <header>
        <h1>[ Ajax Test 1 ]</h1>
    </header>
    <main>
        <p><a href="javascript:test1()">서버로 요청보내기</a></p>
        <div id="content" class="content">
            <!-- AJAX 로드된 데이터가 여기에 표시됩니다. -->
        </div>
    </main>
    <footer>
        <p>&copy; 2024.08 AJAX Practice</p>
    </footer>
</div>
</body>
</html>

 

4. AjaxController.java

package net.datasa.test_ajax;

import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@RequiredArgsConstructor
@Slf4j
@Controller
public class AjaxTestController {
    //ajax1.html로 이동
    @GetMapping("ajax1")
    public String ajax1() {
        return "AjaxTest/ajax1";
    }

    // ajax 요청을 처리하는 메소드 👉 return문 필요없음
    @ResponseBody
    @GetMapping("ajaxtest1")
    public void ajaxtes1() {
        log.debug("AjaxController의 ajaxtest1() 메소드 실행됨");
        // log만 찍어보고 아무것도 안들고 돌아감
        throw new RuntimeException("오류");
    }
}

 

'SCIT > 8월' 카테고리의 다른 글

8/9 Spring Test. 성적 입력  (0) 2024.08.12
8/8 [Ajax] Test1(2)  (0) 2024.08.08
8/7 [게시판] 게시글 첨부파일 다운로드  (0) 2024.08.07
8.6[게시판] 파일 첨부 및 삭제 기능 추가  (0) 2024.08.06
8.5 [게시판] 댓글 저장 및 삭제 기능 추가  (0) 2024.08.05
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
글 보관함