Form태그를 통한 데이터 전송 방법(Ajax/Submit)

당연히 혼용해서 사용하면 안됨..

1. Ajax 방식(비동기식)

<div id="container" style="width: 30%; height: 80px; margin-left: 30%; margin-top: 10%;" >
        <form class="form-signin" id="form">
            <h2 class="form-signin-heading">로그인</h2>
            <label for="inputEmail" class="sr-only">Email address</label>
            <input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>

            <div>
                <label>

                </label>
            </div>
            <button class="btn btn-lg btn-primary btn-block" id="submit" type="button">Sign in</button>
        </form>

<script>

    $(function(){
        $('#submit').on("click",function () {

            var form1 = $("#form").serialize();

            console.log(form1);
            $.ajax({
                type: "post",
                url: "/login/check",
                data: form1,
                dataType: 'json',
                success: function (data) {
                    alert("success");
                    console.log(data);
                },
                error: function (request, status, error) {
                    console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);

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

• HTML form 태그에서 따로 설정해주는 것이 없음. 
• js에서 변수에 접근하려면 해당 태그의 아이디 값으로 $('#submit') 접근

 

2. Submit 방식 (동기식) : 페이지를 이동함(reload)

<form class="form-signin" id="form" method="POST" action="test.jsp">
            <h2 class="form-signin-heading">로그인</h2>
            <label for="inputEmail" class="sr-only">Email address</label>
            <input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>

            <button class="btn btn-lg btn-primary btn-block" id="submit" type="button">Sign in</button>
        </form>

• form을 이용해서 데이터를 날림(method와 action 속성 이용)
• action값에는 url을 지정함