写一个html页面带ajax表单提交的页面三个字段
<!DOCTYPE html>
<html>
<head>
<title>AJAX表单提交</title>
<script>
function submitForm() {
var xhr = new XMLHttpRequest();
<pre><code> xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("result").innerHTML = xhr.responseText;
}
}
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var message = document.getElementById("message").value;
var data = "name=" + encodeURIComponent(name) + "&email=" + encodeURIComponent(email) + "&message=" + encodeURIComponent(message);
xhr.open("POST", "submit-form.php");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
</script>
</code></pre>
</head>
<body>
<h1>AJAX表单提交</h1>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">留言：</label>
<textarea id="message" name="message"></textarea><br><br>
<button type="button" onclick="submitForm()">提交</button>
</form>
<div id="result"></div>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/htC2 著作权归作者所有。请勿转载和采集!