Question

我有一个PHP脚本，用于检查电子邮件地址以确定它是否有效。该函数只返回true或false。我试图实现对php文件的ajax调用，并将true或false返回给javascript函数。目前我一无所获。

function validateForm() {
    var email = document.forms["contact"]["email"].value;
    var validEmail;

    $.ajax({
        type: "POST",
        url: "validateEmail.php",
        data: "email=" + email,
        success: function(result) {
            validEmail = result;
            console.log('result: ' + validEmail);
        }
    });
}

如果我可以检索true或false，我会做一些布尔检查以确定如何继续。当用户单击表单“提交”按钮时，将调用函数validateForm()。

<form name="contact" action="submitOrder.php" onsubmit="return validateForm();" method="post">

如果电子邮件地址无效，我希望validateForm()函数返回false，以便从不调用submitOrder.php，但由于AJAX的异步性质，我不知道如何执行此操作。

更新

请求正常（我很确定）。这就是我在Firebug中看到的。 enter image description here 我还没有看到任何回报。控制台打印“结果：”。我还更改了validateEmail.php以返回数字17，但仍然没有返回任何内容。

感谢您的帮助！

Answer 1

使用JQuery Validate插件。会更简单，然后从头开始编写它。

Answer 2

jQuery的ajax函数默认是异步的。这意味着它发出ajax请求然后返回。您可能需要将async参数设置为false，然后在成功函数中设置validEmail，就像您正在做的那样。然后你可以在ajax调用之后安全地返回validEmail。

function validateForm() {
  var email = document.forms["contact"]["email"].value;
  var validEmail = false;

  $.ajax({
    type: "POST",
    url: "validateEmail.php",
    async: false,
    data: "email=" + email,
    success: function(result) {
        validEmail = result;
        console.log('result: ' + validEmail);
    }
  });

  return validEmail;
}

Answer 3

我认为你失踪了;在你的jquery调用结束时

$.ajax({
    type: "POST",
    url: "validateEmail.php",
    data: "email=" + email,
    success: function(result) {
        validEmail = result;
        console.log('result: ' + validEmail);
    }
});

我建议安装firebug，这样你就可以看到ajax调用＆amp;响应 - 你应该能够更轻松地调试它。

Answer 4

如果您不想让AJAX调用同步，那么如果结果有效，您可以提交Ajax调用。调用validateForm并将false返回给onsubmit。（我不会让validateForm本身返回false，因为它不是正交的）。

Answer 5

我认为你需要一个event.preventDefault（）;让异步调用正常工作

$（ '＃提交按钮-ID'）。点击（函数（事件）{ event.preventDefault（）; }）;

这应该阻止浏览器在完成任何类型的验证之前提交表单。（注意，您需要为您的提交按钮提供一个可以引用的类或ID，以便激活它。）

http://api.jquery.com/event.preventDefault/

Answer 6

不建议对ajax调用使用同步选项，因为它可以暂时锁定浏览器。请注意jquery's ajax() page中的以下引用。

请注意，同步请求可能会暂时锁定浏览器，在请求处于活动状态时禁用任何操作。

相反，您可以使用提交表单的按钮调用validateForm函数，并且当调用ajax成功时，它可以提交表单。

function validateForm() {
    var email = document.forms["contact"]["email"].value;

    $.ajax({
        type: "POST",
        url: "validateEmail.php",
        data: "email=" + email,
        success: function(result) {
            if (result == true)
                document.forms["contact"].submit();
        }
    });
}

Answer 7

使用async: false是一种使用AJAX的糟糕方式，因为您不必要地阻止了javascript。使用客户端验证程序（如jQuery Validate）很危险，因为攻击者可以禁用javascript并提交无效表单。服务器端验证是必须的，它可以用好的旧AJAX来完成！

关键是回调。您尝试从validateForm返回的任何内容都将在您的AJAX调用返回之前返回，因为AJAX是异步的（非阻塞）。这意味着您无法在不暂停所有javascript执行的情况下从AJAX成功函数返回值。相反，您将回调函数作为AJAX成功函数可以调用的参数传递。在回调中，您可以进行布尔检查以确定如何继续。您也可以直接在success函数内部执行此操作（这实际上是一个回调！）但回调参数和其他函数稍微分离了代码，这是一种很好的做法。我修改了你的代码，给你一个我的意思的例子。

function validateForm(callback) {
    var email = document.forms["contact"]["email"].value;
    var validEmail;

    $.ajax({
        type: "POST",
        url: "validateEmail.php",
        data: "email=" + email,
        success: function(result) {
            validEmail = result;
            console.log('result: ' + validEmail);
            callback(result);
        }
    });
}

function doSomethingWithResult(result) {
    if (result === True) {
        // Do true stuff
    } else {
        // Do false stuff
    }
}

validateForm(doSomethingWithResult);

从AJAX获取返回值

7 个答案: