본문 바로가기
intellij +springboot

[intellij] 그래들 스프링부트 프로젝트 화면으로 데이터 가져오기(gradle + springboot) - 4

jeongyj 2022. 10. 5. 16:25

 

 

 

이번 글에서는 화면에서 디비에 접근해서 데이터를 가져와보려 합니다.

 

데이터는 임시로 넣어놨습니다

 

테스트를 위한 버튼 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    // 제이쿼리 쓰기위한 셋팅
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<img src="../static/img/header-logo.png" alt="">
<img src="../../../../static/img/search-icon.svg" alt="">
<div> 메인 페이지 입니다.</div>
<button  id="bringdata">gogo</button>
</body>
<script>
        $("#bringdata").click(function() {
            $.ajax({
                type : "POST",
                // controller 에 매핑된 url
                url : "/api/v1/test/findAll",
                dataType : "json",
                error : function(){
                    alert('error');
                },
                success : function(data){
                    alert("통신데이터 값 : " + JSON.stringify(data));
                }

            });
        });
</script>
</html>

 

++ ajax 사용법

더보기 
$.ajax({
    type: "post",
    global: true,
    async: true,
    url: "ajax_request.php",
    dataType : "html",
    timeout: 30000,
    cache: true,
    data: {"id":"1", "mode":"write"},
    contentType : "application/x-www-form-urlencoded; charset=utf-8",
    error: function (jqXHR, textStatus, errorThrown) {
        // 통신에 에러가 있을경우 처리할 내용(생략가능)
    },
    success: function (data, textStatus, jqXHR) {
        // 통신이 정상적으로 완료되면 처리할 내용
    },
    beforeSend: function (jqXHR, settings) {
        // 통신이 시작하기전 처리할 내용(생략가능)
    },
    complete: function (jqXHR, settings) {
        // 통신이 완료된 후 처리할 내용 (생략가능)
    }
});
  • type
    • post 또는 get 사용 데이터를 전달할 method 방식을 선택
  • global
    • .ajaxSend(), .ajaxError() 의 전역 이벤트 핸들러를 제어 함, 기본값은 true
  • async
    • 동기, 비동기 방식 설정 기본값은 true, true면 모든 요청은 비동기 방식으로 동작
    • 크로스 도메인과 dataType이 jsonp인 경우는 동기방식을 지원하지 않음
    • 동기방식은 요청이 처리될 때까지 브라우저가 일시적으로 잠김
  • url
    • 요청할 파일 주소
  • dataType
    • 요청을 받은 데이터의 타입
    • xml, html, json, jsonp, script, text이 존재 (주로 text, html, json을 많이 씀)
  • timeout
    • 요청 응답 대기 시간 기본적으로 .ajaxSetup()에서 설정한 값을 이용함
    • 지정한 시간 동안 응답이 없으면 error 발생 (대부분 설정하지 않음)
  • cache
    • 기본값 true, 브라우저의 캐시 유무를 설정 false 설정하면 강제적으로 캐싱하지 않음
    • dataType이 jsonp, script일 경우에는 false 설정
  • data
    • 요청 시 보낼 데이터
    • .serializeArray() 또는 .serialize()로 전송 가능

참고 사이트

 

결과

 

 

여기까지만 하면 아쉬우니 타임리프로 화면 나누기

 

우선<html> 태그 부분에 

http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

추가해 준다

 

<!DOCTYPE html>
// 타임리프를 쓰겠다는 선언
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

// 해더부분을 나눠보자
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    // 제이쿼리 쓰기위한 셋팅
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
// 해더부분을 나눠보자
<body>
<img src="../static/img/header-logo.png" alt="">
<img src="../../../../static/img/search-icon.svg" alt="">
<div> 메인 페이지 입니다.</div>
<button  id="bringdata">gogo</button>
</body>
<script>
        $("#bringdata").click(function() {
            $.ajax({
                type : "POST",
                // controller 에 매핑된 url
                url : "/api/v1/test/findAll",
                dataType : "json",
                error : function(){
                    alert('error');
                },
                success : function(data){
                    alert("통신데이터 값 : " + JSON.stringify(data));
                }

            });
        });
</script>
</html>

템플릿에 해드부분만 따로 빼서 만들어 준다.

<!DOCTYPE html>
// 여기도 신경 써줄것  th:fragment 는 불러올 아이디 
<head xmlns:th="http://www.thymeleaf.org" th:fragment="header">
    <meta charset="UTF-8">
    <title>나눠진 해더입니다</title>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>

 

그 다음 태그 안쪽 내용을 지우고 replace 에는 경로 :: 뒤에는 fragment 에 세팅한 아이디를  써주면 끝

 

<!DOCTYPE html>
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head  th:replace="/head.html :: header">
</head>
<body>
<img src="../static/img/header-logo.png" alt="">
<img src="../../../../static/img/search-icon.svg" alt="">
<div> 메인 페이지 입니다.</div>
<button  id="bringdata">gogo</button>
</body>

.

.

.

.

 아는게 없다보니 너무 막 가져다 쓰면서 만들었네요 시간 날때마다 수정 하겠습니다.

부족한 부분 댓글로 피드백 부탁드려요

'intellij +springboot' 카테고리의 다른 글

[intelliJ]인텔리제이에서 이클립스 프로젝트 import하기  (2) 2023.10.24
[intellij] 그래들 스프링부트 프로젝트 스프링 시큐리티(Spring Security) 로그인 해보기(gradle + springboot) - 5  (2) 2022.10.07
[intellij]그래들 스프링부트 프로젝트 쿼리 적용 해보기(gradle + springboot) - 3  (2) 2022.10.05
[intellij]그래들 스프링부트 프로젝트 MariaDB 연결(gradle + springboot) - 2  (2) 2022.10.04
[intellij]그래들 스프링부트 프로젝트 시작하기(gradle + springboot) - 1  (0) 2022.10.04

'intellij +springboot' Related Articles

티스토리툴바