如果您不想使用AJAX,但仍然希望在提交表单时不跳转页面,您可以使用HTML5的FormData对象和XMLHttpRequest对象来实现。以下是一个示例:

HTML代码:

<form id='myForm' action='submit.php' method='post'>
  <input type='text' name='name' placeholder='Name'>
  <input type='email' name='email' placeholder='Email'>
  <input type='submit' value='Submit'>
</form>

JavaScript代码:

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单提交的默认行为

  var form = event.target;
  var formData = new FormData(form); // 创建FormData对象

  var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
  xhr.open('POST', form.action, true); // 设置请求方法、URL和异步标志

  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      console.log(xhr.responseText); // 处理服务器返回的响应数据
    }
  };

  xhr.send(formData); // 发送表单数据

  return false; // 阻止事件冒泡和默认行为
});

在上述示例中,我们使用event.preventDefault()阻止了表单提交的默认行为。然后,我们创建了一个FormData对象,并将表单数据添加到其中。接下来,我们创建了一个XMLHttpRequest对象,并设置了请求方法、URL和异步标志。在xhr.onreadystatechange事件处理程序中,我们处理了服务器返回的响应数据。最后,我们使用xhr.send(formData)发送表单数据。

请注意,这种方法仍然使用了AJAX技术,只是没有显式地编写AJAX代码,而是使用了HTML5的FormData对象和XMLHttpRequest对象来简化操作。


原文地址: https://www.cveoy.top/t/topic/pg2d 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录