2

我有一个 PHP 脚本，它检查电子邮件地址以确定它是否有效。该函数只返回trueor false。我正在尝试实现对 php 文件的 ajax 调用并将trueorfalse返回到 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 中看到的。 在此处输入图像描述 我仍然没有看到任何返回。控制台打印“结果：”。我还更改了 validateEmail.php 以返回数字 17，但我仍然没有返回任何内容。

谢谢你的帮助！

4

7 回答 7

1

使用JQuery 验证插件。然后从头开始散列它会简单得多。

于 2012-05-31T23:35:57.093 回答
0

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

于 2012-05-31T23:30:18.453 回答
0

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

$('#submit-button-id').click(function(event){ event.preventDefault(); });

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

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

于 2012-05-31T23:31:58.507 回答
0

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;
}
于 2012-05-31T23:27:51.887 回答
0

我认为你有一个失踪; 在你的 jquery 调用结束时

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

我建议安装 firebug，这样你就可以看到 ajax 调用和响应发生了什么——你应该能够更容易地调试它。

于 2012-05-31T23:28:31.320 回答
0

不建议对 ajax 调用使用同步选项，因为它会暂时锁定浏览器。请注意jquery 的 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();
        }
    });
}
于 2012-06-01T00:13:54.943 回答
0

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

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

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);
于 2013-12-03T22:21:47.497 回答