以下是一个使用AJAX调用成功后打印成功消息并清空表单的示例代码:
HTML代码:
JavaScript代码:
function submitForm() {
var form = document.getElementById("myForm");
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("message").innerHTML = "提交成功!";
form.reset(); // 清空表单
}
};
xhttp.open("POST", "submit.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=" + name + "&email=" + email);
}
上述代码中,我们首先获取表单中的姓名和邮箱值。然后创建一个XMLHttpRequest对象,设置其onreadystatechange事件处理函数,当AJAX请求完成时执行该函数。在函数中,我们首先检查请求的状态和响应码,如果一切正常,则将成功消息打印到form.reset()
方法清空表单。最后,使用xhttp.open()
打开一个POST请求,设置请求头部,发送包含姓名和邮箱的数据。请根据实际情况修改URL和请求数据的格式。
相关内容