Welche Methoden gibt es für die Übermittlung von JS-Formularen?

Es gibt mehrere gängige Methoden zum Senden von JS-Formularen: Verwenden der subscribe()-Methode des Formularelements, Verwenden von AJAX für die asynchrone Übermittlung und Verwenden der Fetch-API für die asynchrone Übermittlung.

1. Verwenden Sie die Methode „submit()“ des Formularelements:
   Sie können das Formular senden, indem Sie die Methode „submit()“ des Formularelements aufrufen. Diese Methode löst das Übermittlungsereignis des Formulars aus und lässt den Browser das standardmäßige Übermittlungsverhalten des Formulars ausführen.

Codebeispiel:

<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. Verwendung von AJAX für die asynchrone Übermittlung:
   Durch die Verwendung verwandter Technologien wie XMLHttpRequest oder $.ajax() von jQuery können Sie Formulardaten über eine asynchrone Anfrage an den Server senden und die Antwort des Servers erhalten.

Codebeispiel – Verwendung von nativem 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. Verwendung der Abruf-API für die asynchrone Übermittlung:
   Durch die Verwendung der Abruf-API können Sie die Anfrage vor dem Senden etwas verarbeiten und die Anfrage und Antwort in ein Promise-Objekt einbinden. und mehr Führen Sie asynchrone Vorgänge effizient durch.

Codebeispiel:

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

Die oben genannten sind gängige Formularübermittlungsmethoden in JS. Sie können die geeignete Methode für die Formularübermittlung entsprechend den tatsächlichen Anforderungen auswählen.

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es für die Übermittlung von JS-Formularen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!