javascript - 使用 Javascript + Ajax 验证和提交表单

Question

这就是我想要做的。

• 当在我的表单上单击“提交”表单时，javascript 函数将遍历表单的所有字段。

• 对于每个字段，将调用一个函数，该函数将返回 true/false 以指示是否已正确填写。

• 如果返回 false，它会在该字段旁边显示一条错误消息。

• 如果所有字段都正确，它会提交表单。如果没有，则不提交。

这是棘手的部分。虽然大部分验证是通过 javascript 完成的，但用户名和电子邮件需要通过 ajax 验证，以查看用户名/电子邮件是否已被使用。

我目前为这个 ajax 函数使用的结构与此类似:

function validateSomething()
{
  var valid;
  $.post("something.php", {x:y},
  function(data)
  {
     if (isSomething(data))
       valid=true; 
       //Here referring to the valid variable 
       //set outside this function, in the
       // parent function
     else
       valid=false; 
  });
  return valid/
}

但这目前不起作用。

我该怎么做才能让它工作，即我可以阻止 validateSomething() 函数返回一个值，直到它被内部函数设置为 true/false 吗？

这样的东西会工作吗:

function validateSomething()
{
  var valid="unset";
  $.post("something.php", {x:y},
  function(data)
  {
     if (isSomething(data))
       valid=true; 
       //Here referring to the valid variable 
       //set outside this function, in the
       // parent function
     else
       valid=false; 
  });
  //Loop without returning until valid is set to true or false
  while (valid=='unset')
  {
     //Do nothing?
  }
  return valid/
}

Answer 1

您可以使用 async: false 强制 ajax 调用等待。

像这样使用 jquery:

function validateSomething() {
    var valid;
    $.ajax({
        url: "something.php",
        data: {x: y},
        type: "GET",
        async: false, // this makes the ajax-call blocking
        dataType: 'json',
        success: function (response) {
            valid= response.valid;
        }
     });
     return valid;
}

但是，使用 AJAX 的最大好处是它是异步的。此同步调用可能会在等待服务器时锁定浏览器。