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

웹 개발에서 양식은 사용자가 웹 서버에 데이터를 제출할 수 있는 공통 요소입니다. 사용자가 양식에 데이터를 입력하고 제출 버튼을 클릭하면 양식이 서버에 요청을 보내고 서버는 요청을 처리하고 결과로 응답합니다. 이 과정에서 JavaScript를 사용하면 페이지를 새로 고치지 않고도 양식 데이터를 처리하고 확인할 수 있도록 양식 제출 이벤트를 수신할 수 있습니다. 이 글에서는 JavaScript를 사용하여 양식을 제출하는 방법을 다룹니다.

1. 양식 컨트롤

JavaScript를 사용하여 양식을 제출하기 전에 먼저 HTML 양식 컨트롤에 대한 지식을 이해해야 합니다. 양식 컨트롤에는 입력 상자, 드롭다운 상자, 라디오 버튼, 확인란 등이 포함됩니다. HTML에서 이러한 컨트롤은 태그로 정의되며 각 태그에는 해당 유형을 나타내는 유형 속성이 있습니다. 예를 들어, 텍스트를 입력하는 데 사용되는 입력 상자는 태그를 사용할 수 있고, 양식을 제출하는 데 사용되는 버튼은 태그를 사용할 수 있습니다. 다음은 일반적으로 사용되는 양식 컨트롤 및 해당 유형입니다.

1. 텍스트 상자

2. 비밀번호 상자

3. 확인란

수영

4. 라디오 버튼

<입력 유형 = "radio" name="gender" value="male">Male

5. 드롭다운 상자

Beijing
Shanghai
Guangzhou

2. 양식 제출 이벤트 모니터링

JavaScript에서 양식 데이터를 처리하려면 먼저 양식의 제출 이벤트를 수신해야 합니다. HTML에서 양식 제출 이벤트는

태그로 정의되며 JavaScript의 addEventListener() 메소드를 사용하여 이를 수신할 수 있습니다. 예를 들어, 다음 코드는 제출 버튼을 클릭할 때 이벤트를 수신합니다.

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("username", txtUsername.value);

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

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

4. 양식 데이터 확인

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

if(txtUsername.value == "") {

Alert("사용자 이름을 입력하십시오");

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!