如何使JQuery-AJAX请求同步
如何使ajax请求同步？
我有一张需要提交的表格。 但只有在用户输入正确的密码时才需要提交。
这是表单代码：
并且用于发送和检查密码的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的代码
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(){...}的返回值success: function(){...} 。 ajaxSubmit根本不返回任何值，这相当于undefined ，而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 ，而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事件。
那么，在下面的html中：
首先，阻止提交按钮操作。 然后异步调用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 } } }); });
将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 }
试试这个
解决方案是，使用这样的回调
$(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;** }