如何在表单提交时发送 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 运行之前提交，如果我添加return false; AJAX 在脚本中显示“参考 1”的地方运行，但表单未提交。

Answer 1

您的问题与此类似：

通过 AJAX 在 php 和 mysql 中实时检查用户名是否存在

引用帖子：

“使用 jQuery 在 javascript 中发送您的数据，如下所示：”

$.post( "check.php", { user: $("#username").val() }, function (data){
  if(data=='1'){
   //do 1
  }
  elseif(data=='0'){
    //do 0
  }
});

在您的检查中。php 得到这样的用户名

//some basic validation
if(!isset($_POST['user'] || empty($_POST['user']))
{

       echo '0'; exit();
    }

$username = trim($_POST['user']); 

“要使此功能正常工作，请检查。php 必须返回 1 或 0，不要在此处或其他地方回显 mysql 错误。如果发生任何错误，只需回显 0。”

Answer 2

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

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

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

您还可以在单个请求中向服务器发送多个值，而不是执行两个单独的请求。 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);
  }
}