html form과 submit 페이지 새로고침

코딩을 합시다·2022년 12월 11일
0

ajax를 통해 데이터를 html로 보내고 싶은데 ajax를 보낼때 마다 페이지가 reload되서 html로 데이터를 도저히 못보내고 있었다.

<form class="sign-in-form active">
	<input type="submit" value="로그인" style="background-color: #1f9a50; color: #FFF;" onclick="login()">
</form>
function login() {
        $.ajax({
            type: "POST",
            url: "/api/login",
            data: {id_give: $('#userid').val(), pw_give: $('#userpw').val()},
            success: function (response) {
                if (response['result'] == 'success') {
                    $.cookie('mytoken', response['token']);

                    window.location.href='/accept';
                } else {
                    $('#fail_msg').empty();
                    let fail_login = `<span style="color:#FF0000; font-size:12px;">
                                        아이디 또는 비밀번호가 정확하지 않습니다.
                                      </span>`
                    $('#fail_msg').append(fail_login);
                }
            }
        })
    }

로그인을 성공했을때
window.location.href='/accept';를 통해
url을 이동시키려고 했지만 이동이 될때도있지만(?) 안될때도 있었다.
그 이유는

<form class="sign-in-form active">
	<input type="submit" value="로그인" style="background-color: #1f9a50; color: #FFF;" onclick="login()">
</form>

가설이지만(?)
form 태그 안에 submit이 url을 accept가 아닌 페이지를 새로고침 하는 쪽으로 작동을 한게 아닌가 싶다.

그래서 type="submit"을 사용하지 않고 type="button"으로 수정하니 문제없이 잘 되었다!

0개의 댓글