问题
How do i make an ajax request synchronous?
I have a form which needs to be submitted. But it needs to be submitted only when the user enters the correct password.
Here is the form code:
<form name=\"form\" action=\"insert.php\" method=\"post\" onSubmit=\"return ajaxSubmit(this);\" >
And the jquery code for sending and checking password is this:
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;
}
}
});
}
However the form always submits, regardless of the value returned by the ajax request. I have checked everything else. The value of arr is coming out to be \'successful\' when correct password is entered and works correctly vice versa too.
How do i make this request synchronous? as far as i can debug, the request is asynchronous so the form gets submitted before the request gets completed.
Code for 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;
?>
Update: The solution has been found.
As pointed by Olaf Dietshche: The return value of ajaxSubmit is not the return value of the success: function(){...}. ajaxSubmit returns no value at all, which is equivalent to undefined, which in turn evaluates to true.
And that is the reason, why the form is always submitted and is independent of sending the request synchronous or not.
So, I set a variable to 1 inside success function upon successful. And checked its value out of success function, if it was 1 outside the success function, then I wrote return true ... else return false. And that worked.
Updated working code:
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;
}
}
回答1:
From jQuery.ajax()
async Boolean
Default: true
By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false.
So in your request, you must do async: false instead of async: "false".
Update:
The return value of ajaxSubmit is not the return value of the success: function(){...}. ajaxSubmit returns no value at all, which is equivalent to undefined, which in turn evaluates to true.
And that is the reason, why the form is always submitted and is independent of sending the request synchronous or not.
If you want to submit the form only, when the response is "Successful", you must return false from ajaxSubmit and then submit the form in the success function, as @halilb already suggested.
Something along these lines should work
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;
}
回答2:
It's as simple as the one below, and works like a charm.
My solution perfectly answers your question: How to make JQuery-AJAX request synchronous
Set ajax to synchronous before the ajax call, and then reset it after your ajax call:
$.ajaxSetup({async: false});
$ajax({ajax call....});
$.ajaxSetup({async: true});
In your case it would look like this:
$.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});
I hope it helps :)
回答3:
Instead of adding onSubmit event, you can prevent the default action for submit button.
So, in the following html:
<form name="form" action="insert.php" method="post">
<input type='submit' />
</form>
first, prevent submit button action. Then make the ajax call asynchronously, and submit the form when the password is correct.
$('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
}
}
});
});
回答4:
added dataType as json... made the response as 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
}
回答5:
try this
the solution is, work with callbacks like this
$(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:
Can you try this,
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;**
}
来源：https://stackoverflow.com/questions/13971769/how-to-make-jquery-ajax-request-synchronous