JS表單提交的方法有哪些

JS表單提交的方法有以下幾種常見的方式：使用form元素的submit()方法、使用AJAX進行非同步提交以及使用fetch API進行非同步提交。

1. 使用form元素的submit()方法：
   可以透過呼叫form元素的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>

2. 使用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>

3. 使用fetch API進行非同步提交：
   透過使用fetch 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中文網其他相關文章！