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的返回值不是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 布尔值
  默认值：true
  默认情况下，所有请求都是异步发送的（默认设置为true）。如果需要同步请求，请将此选项设置为false。

因此，在您的请求中，您必须async: false而不是async: "false"。

<强>更新：

ajaxSubmit的返回值不 success: function(){...}的返回值。 ajaxSubmit根本不返回任何值，相当于undefined，而"Successful"的计算结果为真。

是的原因，为什么总是提交表单并且与发送请求同步或不同步。

如果您只想提交表单，当回复为false时，您必须从ajaxSubmit返回success，然后在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; }函数中提交表单，正如@halilb已经建议的那样。

这些方面应该有效

{{1}}

Answer 2

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

我的解决方案完美地回答了您的问题：如何使JQuery-AJAX请求同步

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

File.Copy(file, dest, true);
File.SetAttributes(dest, FileAttributes.Normal);

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

$.ajaxSetup({async: false});

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

$.ajaxSetup({async: true});

我希望它有所帮助：）

Answer 3

您可以阻止提交按钮的默认操作，而不是添加onSubmit事件。

所以，在下面的html中：

<form name="form" action="insert.php" method="post">
    <input type='submit' />
</form>

首先，阻止提交按钮操作。然后异步调用ajax，并在密码正确时提交表单。

$('input[type=submit]').click(function(e) {
    e.preventDefault(); //prevent form submit when button is clicked

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

     $.ajax({
        type: "POST",
        url: "checkpass.php",
        data: "password="+password,
        success: function(html) {
            var arr=$.parseJSON(html);
            var $form = $('form');
            if(arr == "Successful")
            {    
                $form.submit(); //submit the form if the password is correct
            }
        }
    });
});

Answer 4

将dataType添加为json ...将响应设为json ..

<强> PHP

echo json_encode(array('success'=>$res)); //send the response as json **use this instead of echo $res in ur php file**

JAVASRIPT

  var ajaxSubmit = function(formE1) {

        var password = $.trim($('#employee_password').val());    
        $.ajax({
            type: "POST",
            async: "false",
            url: "checkpass.php",
            data: "password="+password,
            dataType:'json',  //added this so the response is in json
            success: function(result) {
                var arr=result.success;
                if(arr == "Successful")
                {    return true;
                }
                else
                {    return false;
                }
            }
        });

  return false
}

Answer 5

试试这个

解决方案是，使用像这样的回调

$(function() {

    var jForm = $('form[name=form]');
    var jPWField = $('#employee_password');

    function getCheckedState() {
        return jForm.data('checked_state');
    };

    function setChecked(s) {
        jForm.data('checked_state', s);
    };


    jPWField.change(function() {
        //reset checked thing
        setChecked(null);
    }).trigger('change');

    jForm.submit(function(){
        switch(getCheckedState()) {
            case 'valid':
                return true;
            case 'invalid':
                //invalid, don submit
                return false;
            default:
                //make your check
                var password = $.trim(jPWField.val());

                $.ajax({
                    type: "POST",
                    async: "false",
                    url: "checkpass.php",
                    data: {
                        "password": $.trim(jPWField.val);
                    }
                    success: function(html) {
                        var arr=$.parseJSON(html);
                        setChecked(arr == "Successful" ? 'valid': 'invalid');
                        //submit again
                        jForm.submit();
                    }
                    });
                return false;
        }

    });
 });

Answer 6

你能试试吗，

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")
                    { 
                         **$("form[name='form']").submit();**
                        return true;
                    }
                    else
                    {    return false;
                    }
                }
            });
              **return false;**
        }

Answer 7

下面是一个工作示例。添加async:false。

const response = $.ajax({
                    type:"POST",
                    dataType:"json",
                    async:false, 
                    url:"your-url",
                    data:{"data":"data"}                        
                });                   
 console.log("response: ", response);

如何使JQuery-AJAX请求同步

7 个答案: