如何使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;
}
}
来自jquery.ajax（）
async 布尔
默认：true
默认情况下，所有请求都是异步发送的（即，默认情况下将其设置为true）。如果您需要同步请求，请将此选项设置为false。
因此，在您的要求下，您必须执行async: false而不是async: "false"。
更新：
ajaxSubmit的返回值是不是 success: function(){...}的返回值。ajaxSubmit完全没有值，这等同于undefined，这又评估为true。
和是为什么始终提交表单的原因，并且独立于发送请求同步。
。如果仅要提交表格，则在响应为"Successful"时，必须从ajaxSubmit返回false，然后在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;
}
它与下面的简单一样简单，并且像魅力一样工作。
我的解决方案完美地回答了您的问题：如何使jQuery-ajax请求同步
在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});
我希望它有帮助：）
而不是添加onsubmit事件，您可以防止提交按钮的默认操作。
so，在以下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
}
}
});
});
以下是一个工作示例。添加async:false。
const response = $.ajax({
type:"POST",
dataType:"json",
async:false,
url:"your-url",
data:{"data":"data"}
});
console.log("response: ", response);
我添加了datatype作为JSON，并将响应作为JSON：
php
echo json_encode(array('success'=>$res)); //send the response as json **use this instead of echo $res in your php file**
javascript
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
}
尝试此
解决方案是，处理像这样的回调
$(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;
}
});
});
您可以尝试一下，
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;**
}
var ajaxSubmit = () => {
var password = $.trim($('#employee_password').val());
ajaxsync(password, (value) => {
if (value) {
alert(`user Login`);
} else {
alert(`user not Login`);
}
});
}
var ajaxsync = (password, callback) => {
$.ajax({
type: "POST",
url: "checkpass.php",
data: "password="+password,
success: function(html) {
var arr = $.parseJSON(html);
if (arr == "Successful") {
callback(true);
} else {
callback(false);
}
}
});
}