如何在不影响实际表单的情况下，在表单提交时发送ajax请求

Question

我想创建一个注册表单，验证您的输入，然后向PHP页面发送AJAX请求，以检查您的用户名是否已被使用。之后，它将提交实际表单(位置在动作属性中(。

function validate() {
if (fullname.length < 90) { /*this is validating the form*/
var username_input = document.forms["myform"]["username"].value;
if (window.XMLHttpRequest) {
var usernamecheck = new XMLHttpRequest();
} else if (window.ActiveXObject) {
var usernamecheck = new ActiveXObject("Microsoft.XMLHTTP");
}
usernamecheck.open("POST", "reciever.php", true);
usernamecheck.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
usernamecheck.send("user=" + username_input); /*sending username to check if it exists*/
usernamecheck.onreadystatechange = function() {
if (usernamecheck.readyState == 4 && this.status == 200) {
if (usernamecheck.responseText == "user") {
alert('username has already been used');
return false;
}
}
};
var contactcheck = new XMLHttpRequest(); /*second request*/
contactcheck.open("POST", "reciever.php", true);
contactcheck.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
contactcheck.send("contact=" + contactw);
contactcheck.onreadystatechange = function() {
if (contactcheck.readyState == 4 && this.status == 200) {
if (contactcheck.responseText == "contact") {
alert('email has already been used');
return false;
}
}
};
}
/*reference 1 (see below)*/
}

我的问题是，表单甚至在AJAX运行之前就提交了，如果我在脚本上写着"引用1"的地方添加return false;，AJAX就会运行，但表单不会提交。

Answer 1

如果您的函数被用作事件处理程序，如addEventListener('submit', validate)或onsubmit="validate()"，那么您应该检查Event对象与提交事件一起发送，并防止表单的默认提交行为。

您可以使用event.preventDefault()方法来做到这一点，就像它所说的那样，它可以防止提交表单的默认行为。

但是，return false语句不起作用的原因是XMLHttpRequest.send()的异步特性。这意味着函数不会等待return语句，因为它位于稍后调用的函数内部。他的行为的原因是在等待服务器的响应时让其他代码运行，而不是在请求完成之前保留代码。

您也可以在一个请求中向服务器发送多个值，而不是执行两个单独的请求。AJAX请求应该尽可能地优化，因为它们(可能(会对客户端和服务器造成负担。

请参阅下面的片段，了解如何完成以上所有操作。

function validate(event) {
if (fullname.length >= 90) {
return; // Stop function if condition is not met.
}
event.preventDefault(); // Prevent form from submitting.
var form = event.target; // The target is the form that is submitting.
var userName = form.elements['username'].value;
var email = form.elements['email'].value; // I assume this was missing.
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("POST", "reciever.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = this.responseText;
if (response === "user") {
alert('Username has already been used');
} else if (response === "email") {
alert('Email has already been used');
}
}
};
request.send('user=' + userName + '&email=' + email); // Send both user name and email values.
}

您似乎使用了像ActiveXObject这样的遗留代码，而当前浏览器已不再使用这些代码。如果你真的需要它用于旧的浏览器，那么你就很好了。如果您想要一种更现代的方法，并且不需要支持旧的浏览器，那么请查看下面的示例。它(几乎(做同样的事情，但使用不同的语法。

const alerts = {
'user': 'Username has already been used',
'email': 'Email has already been used'
};
async function validate(event) {
if (fullname.length >= 90) return; 
event.preventDefault();
const formData = new FormData(event.target);
try {
const response = await fetch('reciever.php', {
method: 'POST',
body: formData
}
if (!response.ok) {
throw new Error(`
Check has failed. - 
${response.status}: 
${response.statusText}`
);
}
const text = await response.text();
if (text in alerts) alert(alerts[text]);
} catch (error) {
console.error(error);
}
}