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/oWqN 著作权归作者所有。请勿转载和采集!