Nellie's Blog

ajax xhr서버 요청 실패 에러/ 회원가입 최종성공 jsp코드 본문

Frond-end/javascript

ajax xhr서버 요청 실패 에러/ 회원가입 최종성공 jsp코드

Nellie Kim 2023. 9. 13. 11:45
728x90

컨트롤러

@RequiredArgsConstructor
@Controller
@Slf4j
@CrossOrigin
public class HomeController {
    private final UserService userService;

    // 1. 회원가입 화면
    @GetMapping("/register")
    public String signupForm() {
        return "register";
    }

    // 2. 회원가입
    @PostMapping("/register")
    @ResponseBody
    public void signup(@RequestBody UserDto userDto) {
        System.out.println("TEST");

        System.out.printf("testDto == " + userDto.getEmail());

        boolean success = true;
        try{
            // 회원가입 실시!
            userService.signUp(userDto);

        }catch (Exception e){
            e.printStackTrace();
            userDto.setMessage("오류가 발생 ㅠㅠ ");
            success = false;
        }
        if(success){
        }

        return ;
    }

 

 

register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입 화면 샘플 - Bootstrap</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
        body {
            min-height: 100vh;

            background: -webkit-gradient(linear, left bottom, right top, from(#92b5db), to(#1d466c));
            background: -webkit-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
            background: -moz-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
            background: -o-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
            background: linear-gradient(to top right, #92b5db 0%, #1d466c 100%);
        }

        .input-form {
            max-width: 680px;

            margin-top: 80px;
            padding: 32px;

            background: #fff;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            -webkit-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
            -moz-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
            box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15)
        }
    </style>
</head>

<body>
<div class="container">
    <div class="input-form-backgroud row">
        <div class="input-form col-md-12 mx-auto">
            <h4 class="mb-3">회원가입</h4>
            <form  method="post">
                <div class="mb-3">
                    <label for="email">이메일</label>
                    <input type="email" class="form-control" id="email" placeholder="weaver123@example.com" required>
                    <div class="invalid-feedback">
                        이메일을 입력해주세요.
                    </div>
                </div>

                <div class="mb-3">
                    <label for="password">비밀번호</label>
                    <input type="password" class="form-control" id="password" placeholder="비밀번호는 8~16자 영문, 숫자, 특수문자를 사용하세요" required>
                    <div class="invalid-feedback">
                        비밀번호를 입력해주세요.
                    </div>
                </div>

                <div class="mb-3">
                    <label for="passwordConfirm">비밀번호 확인</label>
                    <input type="password" class="form-control" id="passwordConfirm" placeholder="비밀번호를 다시 입력해주세요" required>
                    <div class="invalid-feedback">
                        비밀번호를 다시 입력해주세요.
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="username">이름</label>
                        <input type="text" class="form-control" id="username" placeholder="홍길동" value="" required>
                        <div class="invalid-feedback">
                            이름을 입력해주세요.
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="nickname">별명</label>
                        <input type="text" class="form-control" id="nickname" placeholder="별명" value="" required>
                        <div class="invalid-feedback">
                            별명을 입력해주세요.
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="phoneNumber">휴대폰 번호</label>
                    <input type="text" class="form-control" id="phoneNumber" placeholder="비밀번호를 다시 입력해주세요" required>
                    <div class="invalid-feedback">
                        휴대폰 번호를 입력해주세요.
                    </div>
                </div>





<%--                <div class="mb-3">--%>
<%--                    <label for="address">주소</label>--%>
<%--                    <input type="text" class="form-control" id="address" placeholder="서울특별시 강남구" required>--%>
<%--                    <div class="invalid-feedback">--%>
<%--                        주소를 입력해주세요.--%>
<%--                    </div>--%>
<%--                </div>--%>

<%--                <div class="mb-3">--%>
<%--                    <label for="address2">상세주소<span class="text-muted">&nbsp;(필수 아님)</span></label>--%>
<%--                    <input type="text" class="form-control" id="address2" placeholder="상세주소를 입력해주세요.">--%>
<%--                </div>--%>

<%--                <div class="row">--%>
<%--                    <div class="col-md-8 mb-3">--%>
<%--                        <label for="root">가입 경로</label>--%>
<%--                        <select class="custom-select d-block w-100" id="root">--%>
<%--                            <option value=""></option>--%>
<%--                            <option>검색</option>--%>
<%--                            <option>카페</option>--%>
<%--                        </select>--%>
<%--                        <div class="invalid-feedback">--%>
<%--                            가입 경로를 선택해주세요.--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                    <div class="col-md-4 mb-3">--%>
<%--                        <label for="code">추천인 코드</label>--%>
<%--                        <input type="text" class="form-control" id="code" placeholder="" required>--%>
<%--                        <div class="invalid-feedback">--%>
<%--                            추천인 코드를 입력해주세요.--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--                <hr class="mb-4">--%>
<%--                <div class="custom-control custom-checkbox">--%>
<%--                    <input type="checkbox" class="custom-control-input" id="aggrement" required>--%>
<%--                    <label class="custom-control-label" for="aggrement">개인정보 수집 및 이용에 동의합니다.</label>--%>
<%--                </div>--%>
                <div class="mb-4"></div>
                <button class="btn btn-primary btn-lg btn-block" type="button" id="registrationForm" onclick="test()">가입 완료</button>
            </form>
        </div>
    </div>
    <footer class="my-3 text-center text-small">
        <p class="mb-1">&copy; 2021 YD</p>
    </footer>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

    function test() {
            // e.preventDefault(); // 폼 제출 방지

            // 1. 여기서 내가 화면에서 post 로 입력하는 정보를 하나하나 가져오기
            var username = $('#username').val()
            var nickname = $('#nickname').val()
            var email = $('#email').val()
            var password = $('#password').val()
            var passwordConfirm = $('#passwordConfirm').val()
            var phoneNumber = $('#phoneNumber').val()

            console.log(username);
            console.log(nickname);
            console.log(email);
            console.log(password);
            console.log(passwordConfirm);
            console.log(phoneNumber);

            // aggrement: $('#aggrement').prop('checked')
            // 폼 데이터 수집 -> 옛날 방식
            // var formData = new FormData();
            // formData.append("username", username);
            // formData.append("nickname", nickname);
            // formData.append("email", email);

           // 2. 가져온 정보를 data로 묶기
            let data = {
                "username" : username,
                "nickname" : nickname,
                "email" : email,
                "password" : password,
                "passwordConfirm" : passwordConfirm,
                "phoneNumber" : phoneNumber
            }

            // 3. 클라에서 가져온 데이터를 서버로 전송 (이 예시에서는 URL이 '/register'로 가정)
            $.ajax({
                type: 'POST',
                url: '/register', // 가입완료 버튼을 누르면 이 URL로 매핑!!! 마지막에 가는게xx
                data: JSON.stringify(data),
                dataType: 'json', // JSON 형식의 응답을 요청
                contentType: 'application/json', // JSON 형식의 데이터를 전송
                success: function (response, status, xhr) { // response 객체에 success, msg가 json형식으로 존재함(컨트롤러에서 반환한 값이 json으로 들어옴)
                    if (xhr.status === 200) {
                        // 서버 응답의 상태 코드가 200일 때만 실행
                        alert('가입이 완료되었습니다!!!!.');
                        // location.href = response.url;
                        location.href = "/home";
                    } else {
                        // 가입 실패 처리
                        alert('서버에서 오류가 발생했습니다.');
                    }
                },
                error: function (xhr) {
                    // 서버 요청 실패 시 실행
                    alert('서버 요청 실패');
                }
            });

    }


</script>
</body>
</html>

 

200 으로 오고, 디비에도 잘 저장이 되는데 , 

서버 요청 실패가 뜨면서 /home 으로 이동이 안됨 

개발자 도구 콘솔을 보니 parseerror 가 뜸!

아래 블로그에서 dataType: 'json' 을 지우라고 해서 지웠다. 

 

return 문에서 200 status code와 함께 header 값만 반환한다.

즉 body부분은 비어있는 채로 리턴하게 된다. 

 

Ajax 코드에서 살펴보시면 dataType : 'json'가 있다.

 

Ajax가 생각하는 반환 형태는 json인데 실질적으로 넘어오는 반환값은 단순 header 값 이기 때문에,

반환값의 불일치로 발생하는 에러였다!

 

해결 완료!!

 

 

최종 성공한 register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입 화면 샘플 - Bootstrap</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
        body {
            min-height: 100vh;
            background: -webkit-gradient(linear, left bottom, right top, from(#92b5db), to(#1d466c));
            background: -webkit-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
            background: -moz-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
            background: -o-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
            background: linear-gradient(to top right, #92b5db 0%, #1d466c 100%);
        }

        .input-form {
            max-width: 680px;

            margin-top: 80px;
            padding: 32px;

            background: #fff;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            -webkit-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
            -moz-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
            box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15)
        }
    </style>
</head>

<body>
<div class="container">
    <div class="input-form-backgroud row">
        <div class="input-form col-md-12 mx-auto">
            <h4 class="mb-3">회원가입</h4>
            <form  method="post">
                <div class="mb-3">
                    <label for="email">이메일</label>
                    <input type="email" class="form-control" id="email" placeholder="weaver123@example.com" required>
                    <div class="invalid-feedback">
                        이메일을 입력해주세요.
                    </div>
                </div>

                <div class="mb-3">
                    <label for="password">비밀번호</label>
                    <input type="password" class="form-control" id="password" placeholder="비밀번호는 8~16자 영문, 숫자, 특수문자를 사용하세요" required>
                    <div class="invalid-feedback">
                        비밀번호를 입력해주세요.
                    </div>
                </div>

                <div class="mb-3">
                    <label for="passwordConfirm">비밀번호 확인</label>
                    <input type="password" class="form-control" id="passwordConfirm" placeholder="비밀번호를 다시 입력해주세요" required>
                    <div class="invalid-feedback">
                        비밀번호를 다시 입력해주세요.
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="username">이름</label>
                        <input type="text" class="form-control" id="username" placeholder="홍길동" value="" required>
                        <div class="invalid-feedback">
                            이름을 입력해주세요.
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="nickname">별명</label>
                        <input type="text" class="form-control" id="nickname" placeholder="별명" value="" required>
                        <div class="invalid-feedback">
                            별명을 입력해주세요.
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="phoneNumber">휴대폰 번호</label>
                    <input type="text" class="form-control" id="phoneNumber" placeholder="비밀번호를 다시 입력해주세요" required>
                    <div class="invalid-feedback">
                        휴대폰 번호를 입력해주세요.
                    </div>
                </div>
                <div class="mb-4"></div>
                <button class="btn btn-primary btn-lg btn-block" type="button" id="registrationForm" onclick="test()">가입 완료</button>
            </form>
        </div>
    </div>
    <footer class="my-3 text-center text-small">
        <p class="mb-1">&copy; 2021 YD</p>
    </footer>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

    function test() {
            // e.preventDefault(); // 폼 제출 방지

            // 1. 여기서 내가 화면에서 post 로 입력하는 정보를 하나하나 가져오기
            var username = $('#username').val()
            var nickname = $('#nickname').val()
            var email = $('#email').val()
            var password = $('#password').val()
            var passwordConfirm = $('#passwordConfirm').val()
            var phoneNumber = $('#phoneNumber').val()

            console.log(username);
            console.log(nickname);
            console.log(email);
            console.log(password);
            console.log(passwordConfirm);
            console.log(phoneNumber);


           // 2. 가져온 정보를 data로 묶기
            let data = {
                "username" : username,
                "nickname" : nickname,
                "email" : email,
                "password" : password,
                "passwordConfirm" : passwordConfirm,
                "phoneNumber" : phoneNumber
            }

            // 3. 클라에서 가져온 데이터를 서버로 전송 (이 예시에서는 URL이 '/register'로 가정)
            $.ajax({
                type: 'POST',
                url: '/register', // 가입완료 버튼을 누르면 이 URL로 매핑!!! 마지막에 가는게xx
                data: JSON.stringify(data),
                // dataType: 'json', // JSON 형식의 응답을 요청
                contentType: 'application/json', // JSON 형식의 데이터를 전송
                success: function (response, status, xhr) { // response 객체에 success, msg가 json형식으로 존재함(컨트롤러에서 반환한 값이 json으로 들어옴)
                    console.log(response); //응답 body부 데이터
                    console.log(status); //"succes"로 고정인듯함
                    console.log(xhr);
                    if (xhr.status === 200) {
                        // 서버 응답의 상태 코드가 200일 때만 실행
                        alert('가입이 완료되었습니다!!!!.');
                        // location.href = response.url;
                        location.href = "/home";
                    } else {
                        // 가입 실패 처리
                        alert('서버에서 오류가 발생했습니다.');
                    }
                },
                error: function (response, status, xhr) {
                    // 서버 요청 실패 시 실행
                    console.log('실패했다...')
                    console.log(response); //응답 body부 데이터

                    alert('서버 요청 실패');
                }
            });
    }
</script>
</body>
</html>

 

 

https://velog.io/@think2wice/Ajax-status-200%EC%9D%B8%EB%8D%B0-parse-error

 

[Ajax] status 200인데 parse error..?

오늘의 포스팅은 spring framework에서 restcontroller를 Ajax와 함께 사용하는중 발생한 error에 관한 내용입니다. Form데이터를 json 형태로 변환한 후 ajax를 이용하여 restcontro

velog.io

 

저작자표시

'Frond-end > javascript' 카테고리의 다른 글

아파치 이차트(Apache ECharts) 란?  (0) 2023.11.07
게시판 페이징 기능 구현 중 에러 (Uncaught SyntaxError: missing ) after argument list)  (2) 2023.09.21
게시판 페이징 기능 구현 중 board.jsp 중간 기록  (0) 2023.09.21
[JQuery] 제이쿼리 자주 쓰는 함수 모음  (0) 2022.09.20
[javascript] 자바스크립트 기본 문법 정리 (java와 비교하며 작성)  (6) 2022.09.16
'Frond-end/javascript' Related Articles more