[JS] preventDefault, action

Q. preventDefault는 왜 사용하고, action과 무슨 차이점이 있을까?

 

A. action 속성을 사용한 폼에서 입력을 하고 제출을 하면, 입력된 데이터가 지정된 페이지로 이동해서 백엔드에서 처리를 한다.

간단히 말해서, 제출된 폼 데이터를 가지고 다른 페이지로 넘긴다!!

// action 속성을 사용한 로그인 폼
<form action="/login" method="post">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="Log in" />
</form>
// 입력을 하고 제출을 하면 입력된 데이터가 '/login' 페이지로 이동해서 로그인 처리를 한다

 

A. preventDefault는 폼에서 입력을 하고 제출을 하더라도 다른 페이지로 넘어가지 않고 입력된 데이터를 가지고 추가적인 동작(또는 데이터 가공)을 수행을 한 후 다른 페이지로 넘기는 데 사용된다!

AJAX 부분은 아직 안 배워서 pass

<form id="loginForm">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="Log in" />
</form>

<script>
  document.getElementById("loginForm").addEventListener("submit", function(event) {
  	// 입력된 데이터가 다른 페이지로 제출되는 것이 아니라 입력된 데이터를 가지고 추가적인 동작을 수행한 후 이동!
    event.preventDefault(); // 폼 제출의 기본 동작 막음

    // 폼 데이터를 가지고 AJAX 요청을 수행
    var username = document.querySelector('input[name="username"]').value;
    var password = document.querySelector('input[name="password"]').value;
    
    // AJAX 요청을 통해 백엔드에 로그인 정보를 보냄
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/login", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 로그인 성공 시 추가 동작 수행 또는 페이지 이동 처리
        // ...
      } else if (xhr.readyState === 4 && xhr.status !== 200) {
        // 로그인 실패 시 처리
        // ...
      }
    };
    var data = JSON.stringify({ username: username, password: password });
    xhr.send(data);
  });
</script>