如何使JQuery-AJAX请求同步

Question

如何使ajax请求同步？

我有一张需要提交的表格.但只有在用户输入正确的密码时才需要提交.

这是表单代码:

<form name="form" action="insert.php" method="post" onSubmit="return ajaxSubmit(this);" >

用于发送和检查密码的jquery代码如下:

var ajaxSubmit = function(formE1) {

    var password = $.trim($('#employee_password').val());

    $.ajax({
        type: "POST",
        async: "false",
        url: "checkpass.php",
        data: "password="+password,
        success: function(html) {
            var arr=$.parseJSON(html);
            if(arr == "Successful") {
                return true;
            } else {
                return false;
            }
        }
    });
}

但是,无论ajax请求返回的值如何,表单始终都会提交.我检查了其他一切.当输入正确的密码时,arr的值将变为"成功",反之亦然.

如何使此请求同步？就我可以调试而言,请求是异步的,因此在请求完成之前提交表单.

checkpass.php的代码

<?php 
require("includes/apptop.php");
require("classes/class_employee.php");
require("classes/class_employee_attendance.php");

$employee_password=$_POST['password']; 

$m=new employee();
$m->setbyid_employee(1);
$arr=$m->editdisplay_employee();

if($arr['employee_password'] == $employee_password)
{
$res="Successful";  
}
else
{
$res="Password not match";  
}

echo $res;
?>

更新:已找到解决方案.

正如Olaf Dietshche指出的那样:返回值ajaxSubmit不是the的返回值success: function(){...}.ajaxSubmit根本不返回任何值,这相当于undefined,而后者的计算结果为true.

这就是为什么表单总是被提交并且与发送请求同步或不同步的原因.

所以,我1成功后将变量设置为内部成功函数.并且从成功函数中检查了它的值,如果它1在成功函数之外,那么我写了return true ... else return false.这很有效.

更新的工作代码:

var ajaxsubmit=function(forme1) {
    var password = $.trim($('#employee_password').val());
    var test="0";

    $.ajax({
        type: "POST",
        url: "checkpass.php",
        async: false,
        data: "password="+password,
        success: function(html) {
            if(html == "Successful") {
                test="1";
            } else {
                alert("Password incorrect. Please enter correct password.");
                test="0";
            }
        }
    });

    if(test=="1") {
        return true;
    } else if(test=="0") {
        return false;
    }
}

Answer 1

来自jQuery.ajax()

async Boolean
默认值:true
默认情况下,所有请求都是异步发送的(默认设置为true).如果需要同步请求,请将此选项设置为false.

所以在你的请求中,你必须做async: false而不是async: "false".

更新:

的返回值ajaxSubmit是不是的返回值success: function(){...}.ajaxSubmit根本不返回任何值,这相当于undefined,而后者的计算结果为true.

而这也是这个道理,为什么表单总是提交并独立发送请求同步与否.

如果你想只提交表单,当反应是"Successful",你必须返回false从ajaxSubmit,然后提交表单的success功能,如@halilb已经建议.

这些方面的东西应该有效

function ajaxSubmit() {
    var password = $.trim($('#employee_password').val());
    $.ajax({
        type: "POST",
        url: "checkpass.php",
        data: "password="+password,
        success: function(response) {
            if(response == "Successful")
            {
                $('form').removeAttr('onsubmit'); // prevent endless loop
                $('form').submit();
            }
        }
    });

    return false;
}

Answer 2

它和下面的一样简单，就像一个魅力。

我的解决方案完美地回答了您的问题：How to make JQuery-AJAX request synchronous

在 ajax 调用之前将 ajax 设置为同步，然后在 ajax 调用之后重置它：

$.ajaxSetup({async: false});

$ajax({ajax call....});

$.ajaxSetup({async: true});

在您的情况下，它看起来像这样：

$.ajaxSetup({async: false});

$.ajax({
        type: "POST",
        async: "false",
        url: "checkpass.php",
        data: "password="+password,
        success: function(html) {
            var arr=$.parseJSON(html);
            if(arr == "Successful") {
                return true;
            } else {
                return false;
            }
        }
    });


$.ajaxSetup({async: true});

我希望它有帮助:)