What are the methods for JS form submission?-JS Tutorial-php.cn

What are the methods for JS form submission?

WBOY

Release： 2024-02-20 14:27:23

Original

506 people have browsed it

What are the methods for JS form submission?

There are several common ways to submit JS forms: using the submit() method of the form element, using AJAX for asynchronous submission, and using the fetch API for asynchronous submission.

Use the submit() method of the form element:
You can submit the form by calling the submit() method of the form element. This method will trigger the form's submit event and let the browser perform the form's default submission behavior.

Code example:

<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>

Copy after login

Use AJAX for asynchronous submission:
By using XMLHttpRequest or jQuery's $.ajax() and other related technologies, you can make asynchronous requests Submit form data to the server and receive a response from the server.

Code Example - Using native 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>

Copy after login

Using the fetch API for asynchronous submission:
By using the fetch API, the request can be processed before it is sent. Some processing and packaging of requests and responses into Promise objects to perform asynchronous operations more efficiently.

Code example:

<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>

Copy after login

The above are common form submission methods in JS. You can choose the appropriate method for form submission according to actual needs.

The above is the detailed content of What are the methods for JS form submission?. For more information, please follow other related articles on the PHP Chinese website!