代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax Form Submit</title>
</head>
<body>
<form id="lyform">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<button type="submit">登录</button>
</form>
<div id="result"></div>
<script>
document.getElementById('lyform').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交
var formData = new FormData(this); // 获取表单数据
var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open('POST', '/path/to/your/php/script.php', true); // 准备发送POST请求到指定的PHP脚本
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) { // 当请求完成且状态为200时
document.getElementById('result').innerHTML = xhr.responseText; // 显示返回的结果
}
};
xhr.send(formData); // 发送表单数据
});
</script>
</body>
</html>
PHP 文件 /path/to/your/php/script.php 执行结果返回给 ,容器<div id="result"></div>