JSフォームの送信方法にはどのようなものがありますか?-jsチュートリアル-php.cn

JSフォームの送信方法にはどのようなものがありますか?

WBOY

リリース： 2024-02-20 14:27:23

オリジナル

562 人が閲覧しました

JSフォームの送信方法にはどのようなものがありますか?

JS フォームを送信するには、いくつかの一般的な方法があります。フォーム要素の submit() メソッドを使用する方法、非同期送信に AJAX を使用する方法、非同期送信にフェッチ API を使用する方法があります。

form 要素の submit() メソッドを使用します。
form 要素の 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 中国語 Web サイトの他の関連記事を参照してください。