JS 양식 제출 방법은 무엇입니까?-JS 튜토리얼-php.cn

JS 양식 제출 방법은 무엇입니까?

WBOY

풀어 주다： 2024-02-20 14:27:23

원래의

561명이 탐색했습니다.

JS 양식 제출 방법은 무엇입니까?

JS 양식을 제출하는 방법에는 양식 요소의 submit() 메서드 사용, 비동기 제출에 AJAX 사용, 비동기 제출에 fetch API 사용 등 몇 가지 일반적인 방법이 있습니다.

양식 요소의 submit() 메소드 사용:
양식 요소의 submit() 메소드를 호출하여 양식을 제출할 수 있습니다. 이 메소드는 양식의 제출 이벤트를 트리거하고 브라우저가 양식의 기본 제출 동작을 수행하도록 합니다.

코드 예:

<form id="myForm" action="submit.php" method="POST">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="提交" />
</form>

<script>
  const form = document.querySelector('#myForm');
  form.addEventListener('submit', (e) => {
    e.preventDefault(); // 阻止表单的默认提交行为
    // 进行表单验证
    // ...
    // 提交表单
    form.submit();
  });
</script>

로그인 후 복사

비동기 제출을 위해 AJAX 사용:
XMLHttpRequest 또는 jQuery의 $.ajax()와 같은 관련 기술을 사용하면 비동기 요청을 통해 양식 데이터를 서버에 제출하고 서버의 응답을 받을 수 있습니다.

코드 예 - 기본 XMLHttpRequest 사용:

<form id="myForm" action="submit.php" method="POST">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="提交" />
</form>

<script>
  const form = document.querySelector('#myForm');
  form.addEventListener('submit', (e) => {
    e.preventDefault(); // 阻止表单的默认提交行为
    // 进行表单验证
    // ...
    // 构造请求对象
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'submit.php', true);
    // 设置请求头
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // 监听请求状态
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    };
    // 发送请求
    xhr.send(new FormData(form));
  });
</script>

로그인 후 복사

비동기 제출을 위한 가져오기 API 사용:
가져오기 API를 사용하면 요청을 보내기 전에 일부 처리를 수행하고 요청과 응답을 Promise 객체로 래핑할 수 있습니다. 비동기 작업을 효율적으로 수행합니다.

코드 예:

<form id="myForm" action="submit.php" method="POST">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="提交" />
</form>

<script>
  const form = document.querySelector('#myForm');
  form.addEventListener('submit', (e) => {
    e.preventDefault(); // 阻止表单的默认提交行为
    // 进行表单验证
    // ...
    // 构造请求参数对象
    const formData = new FormData(form);
    // 发起fetch请求
    fetch('submit.php', {
      method: 'POST',
      body: formData
    })
    .then(response => response.text())
    .then(data => console.log(data))
    .catch(error => console.log(error));
  });
</script>

로그인 후 복사

위는 JS의 일반적인 양식 제출 방법입니다. 실제 필요에 따라 적절한 양식 제출 방법을 선택할 수 있습니다.

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