如何使 JQuery-AJAX 请求同步
Posted
技术标签:
【中文标题】如何使 JQuery-AJAX 请求同步【英文标题】：How to make JQuery-AJAX request synchronous 【发布时间】：2012-12-07 22:47:10 【问题描述】：如何使 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 内的成功函数。并在success函数外检查它的值，如果在success函数外是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;
【问题讨论】：
你的服务器响应的数据类型是什么......json or html ?? 您可以通过按钮点击事件调用ajax并在提交时删除表单并在成功事件时使用表单提交功能。 @bipen: 我的服务器响应的数据类型是html only @Dinesh：是的，我知道可以这样做。但我不想诉诸于此。有什么方法只能通过这种方式来实现？ thn 为什么你使用$.parseJSON(html);...pareseJson 采用格式良好的“JSON”字符串并返回生成的 javascript 对象...检查你的萤火虫这给了console.log(html)跨度>
【参考方案1】：
来自jQuery.ajax()
异步布尔 默认值：真 默认情况下，所有请求都是异步发送的（即默认设置为 true）。如果您需要同步请求，请将此选项设置为 false。
所以在您的请求中，您必须使用async: false 而不是async: "false"。
更新：
ajaxSubmit 的返回值不是success: function()... 的返回值。 ajaxSubmit 根本不返回任何值，相当于 undefined，其结果为 true。
而那是为什么表单总是被提交并且独立于发送请求是否同步的原因。
如果您只想提交表单，当响应为"Successful" 时，您必须从ajaxSubmit 返回false，然后按照@halilb 的建议在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;
【讨论】：
这已从最新版本的 jQuery 中删除。 @Archer 来自手册：“不推荐使用 jqXHR ($.Deferred) 的 false”。 在执行此操作时，提交按钮显示为已单击并且页面挂起。也许表单会一次又一次地提交。当我在成功的情况下向内部发出警报时，它会一次又一次地发出警报。递归。 @user1865933 好的，我错过了。当从success 函数提交表单时，再次调用ajaxSubmit。但是，删除 onsubmit 属性应该可以防止这种情况发生。请重试。
@Olaf Dietsche：你是正确的。成功后，我在成功函数中将变量设置为 1。并从成功函数中检查它的值，如果它在成功函数之外是 1，那么我写了'return true'，否则写'return false'。这奏效了。非常感谢:)【参考方案2】：
它就像下面的一样简单，并且像一个魅力一样工作。
我的解决方案完美回答了你的问题：如何使 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);
希望对你有帮助:)
【讨论】：
虽然这是为 AJAX 调用设置默认参数的便捷方式，但它完全忽略了实际错误并导致不必要的解决方法。async 参数采用布尔值，而不是字符串。将其更改为布尔值是解决方案。【参考方案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
);
);
【讨论】：
@halib：上述方法有效。我试过了。但我不想诉诸这种方式。我们不能通过默认的 onsubmit 事件来实现这一点吗？【参考方案4】：我将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
【讨论】：
async 参数采用布尔值，而不是字符串。字符串"false" 实际上被强制转换为true，因为字符串不为空。【参考方案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;
);
);
【讨论】：
【参考方案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;**
【讨论】：
当然。我会检查并在一分钟内通知您 只有在密码错误的情况下才有效。输入当前密码后，提交按钮仍处于单击状态。页面停止响应 我希望你删除代码中的**。你能在成功的情况下提醒吗？ 是的，我在代码中删除了**。当我将警报代码放入成功的 if 块时，警报出现了，但它总是一次又一次地出现。单击确定后，它会再次显示，依此类推。递归地。也许表单会一次又一次地提交 好的，出于测试目的，您可以从代码中删除 async: "false" 并使用 exit();在 php 文件的末尾。【参考方案7】：以下是一个工作示例。添加async:false。
const response = $.ajax(
type:"POST",
dataType:"json",
async:false,
url:"your-url",
data:"data":"data"
);
console.log("response: ", response);
【讨论】：
以上是关于如何使 JQuery-AJAX 请求同步的主要内容，如果未能解决你的问题，请参考以下文章