PHP 表单提交不跳转页面:无需 AJAX 的方法
如果您不想使用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 著作权归作者所有。请勿转载和采集!