JavaScript를 사용하여 양식을 제출하는 방법

var btnSubmit = document.getElementById("btnSubmit")
btnSubmit.addEventListener("click", function(event) {
//프로세스 양식 data
event .preventDefault(); //기본 제출 동작 비활성화
});

이 예에서는 먼저 getElementById() 메서드를 통해 제출 버튼의 요소를 가져오고 addEventListener() 메서드를 호출하여 수신합니다. 클릭 이벤트입니다. 이벤트 핸들러 함수에서는 양식 데이터를 가져와 처리할 수 있습니다. 마지막으로 양식의 기본 제출 동작이 발생하는 것을 방지하기 위해 event.preventDefault() 메서드를 호출하여 이를 취소합니다.

3. 양식 데이터 가져오기

양식 제출 이벤트를 들은 후 처리할 양식 데이터를 가져와야 합니다. JavaScript에서는 document.forms[] 컬렉션을 사용하여 양식 요소를 가져올 수 있습니다. 예를 들어, 다음 코드는 사용자 이름과 비밀번호를 나타내는 입력 상자 요소를 가져옵니다.

var txtUsername = document.forms[0].username;
var txtPassword = document.forms[0].password; , document.forms[0]을 사용하여 첫 번째 태그의 양식 요소를 가져온 다음 name 속성을 통해 사용자 이름 및 비밀번호 입력 상자의 요소를 가져옵니다.

양식 데이터를 얻는 또 다른 방법은 FormData 개체를 사용하는 것입니다. FormData는 양식 데이터를 작성하여 서버로 보내는 데 사용할 수 있는 새로운 API입니다. 예를 들어, 다음 코드는 FormData 개체를 사용하여 사용자 정보를 전달합니다.

var formData = new FormData();

formData.append("password", txtPassword .value);

이 예에서는 먼저 새 FormData 개체를 만든 다음 Append() 메서드를 사용하여 FormData 개체에 양식 데이터를 추가합니다. 마지막으로 FormData 객체를 XMLHttpRequest 객체의 send() 메소드에 전달하여 양식 데이터를 서버로 보냅니다.

4. 양식 데이터 확인

양식을 제출하기 전에 양식 데이터를 확인해야 합니다. 예를 들어, 사용자 이름과 비밀번호가 비어 있는지 확인할 수 있습니다:

if(txtUsername.value == "") {

txtUsername.focus();
return false; /제출 취소
} else if(txtPassword.value == "") {
Alert("비밀번호를 입력하세요");
txtPassword.focus();
return false; //제출 취소
} else {
// Submit form
return true;
}

이 예에서는 먼저 사용자 이름 입력 상자가 비어 있는지 확인합니다. 비어 있으면 프롬프트 상자가 나타나고 커서가 사용자 이름 입력 상자로 이동합니다. 사용자 이름이 비어 있지 않으면 비밀번호 입력 상자가 비어 있는지 계속 확인합니다. 비밀번호가 비어 있지 않으면 양식 제출이 허용됩니다.

5. 완전한 JavaScript 코드 예제

이제 JavaScript를 사용하여 양식을 제출하는 방법을 배웠습니다. 다음은 양식의 제출 이벤트를 수신하고, 양식 데이터를 가져오고, 데이터의 유효성을 검사하고, 서버로 보내는 완전한 JavaScript 코드 예제입니다.

var frmLogin = document.getElementById("frmLogin");
frmLogin.addEventListener("submit", function(event) {
var txtUsername = document.forms[0].username;
var txtPassword = document.forms[0] .password;

if(txtUsername.value == "") {

alert("请输入用户名");
txtUsername.focus();
event.preventDefault();

} else if(txtPassword.value == "") {

alert("请输入密码");
txtPassword.focus();
event.preventDefault();

} else {

var formData = new FormData();
formData.append("username", txtUsername.value);
formData.append("password", txtPassword.value);

var xhr = new XMLHttpRequest();
xhr.open("POST", "login.php", true);
xhr.onload = function() {
  if(xhr.status == 200) {
    alert(xhr.responseText);
  } else {
    alert("请求失败：" + xhr.status);
  }
};
xhr.send(formData);

event.preventDefault();

}
});

in this 예제에서는 먼저 getElementById() 메서드를 통해 로그인 양식을 나타내는 요소를 얻은 다음 addEventListener() 메서드를 호출하여 제출 이벤트를 수신합니다. 이벤트 처리 기능에서는 사용자 이름과 비밀번호의 입력 상자 요소를 얻어 판단합니다. 요구 사항이 충족되지 않으면 프롬프트 상자가 팝업되고 양식의 기본 제출 동작이 취소됩니다. 사용자 이름과 비밀번호가 모두 비어 있지 않으면 FormData 객체가 생성되고 데이터가 여기에 추가됩니다. 마지막으로 XMLHttpRequest 개체를 사용하여 FormData 개체를 서버로 보내고 응답 결과를 프롬프트 상자에 표시합니다.

위 내용은 JavaScript를 사용하여 양식을 제출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!