Как сделать запрос JQuery-AJAX синхронным
Как сделать синхронный запрос 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;
?>
Обновление: решение найдено.
Как указал Олаф Диетше: Возвращаемое значение 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;
}
}
Ответы
Ответ 1
Из jQuery.ajax()
async Логические
По умолчанию: true
По умолчанию все запросы отправляются асинхронно (т.е. По умолчанию это значение равно true). Если вам нужны синхронные запросы, установите для этого параметра значение false.
Итак, в вашем запросе вы должны сделать async: false
вместо async: "false"
.
Обновление
Возвращаемое значение ajaxSubmit
не является возвращаемым значением success: function(){...}
. ajaxSubmit
не возвращает никакого значения, что эквивалентно undefined
, которое, в свою очередь, оценивается как true.
И в этом причина, почему форма всегда отправляется и не зависит от отправки запроса синхронно или нет.
Если вы хотите отправить форму только, когда ответ "Successful"
, вы должны вернуть false
из ajaxSubmit
, а затем отправить форму в функцию 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;
}
Ответ 2
Вместо добавления события onSubmit вы можете предотвратить действие по умолчанию для кнопки отправки.
Итак, в следующем html:
<form name="form" action="insert.php" method="post">
<input type='submit' />
</form>
сначала, запретите действие кнопки отправки. Затем выполните асинхронный вызов асинхронно и отправьте форму, когда пароль верен.
$('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
}
}
});
});
Ответ 3
Это так же просто, как и ниже, и работает как шарм.
Мое решение отлично отвечает на ваш вопрос: как сделать запрос JQuery-AJAX синхронным
Установите ajax для синхронности перед вызовом ajax, а затем reset после вашего вызова 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});
Надеюсь, это поможет:)
Ответ 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
}
Ответ 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;**
}