insertar - Como hacer la solicitud JQuery-AJAX sincrónica

jquery text

Question

¿Cómo hago una solicitud ajax síncrona?

Tengo un formulario que debe ser enviado. Pero solo se debe enviar cuando el usuario ingresa la contraseña correcta.

Aquí está el código del formulario:

<form name="form" action="insert.php" method="post" onSubmit="return ajaxSubmit(this);" >

Y el código jquery para enviar y verificar la contraseña es este:

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;
}
}
});
}

Sin embargo, el formulario siempre se envía, independientemente del valor devuelto por la solicitud ajax. He comprobado todo lo demás. El valor de arr está resultando "exitoso" cuando se ingresa la contraseña correcta y también funciona correctamente al revés.

¿Cómo hago esta solicitud síncrona? Hasta donde puedo depurar, la solicitud es asíncrona, por lo que el formulario se envía antes de que se complete la solicitud.

Código para 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;
?>

Actualización: La solución ha sido encontrada.

Como señaló Olaf Dietshche: El valor de retorno de ajaxSubmit no es el valor de retorno de success: function(){...} . ajaxSubmit no devuelve ningún valor, lo que equivale a undefined , que a su vez se evalúa como true .

Y esa es la razón por la que el formulario siempre se envía y es independiente de enviar la solicitud de forma síncrona o no.

Por lo tanto, puse una variable en 1 dentro de la función de éxito en caso de éxito. Y verifiqué su valor fuera de la función de éxito, si estaba 1 fuera de la función de éxito, entonces escribí return true ... else return false . Y eso funcionó.

Código de trabajo actualizado:

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;
}
}

Answer 1

¿Puedes probar esto,

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;**
}

Answer 2

De jQuery.ajax()

asíncrono booleano
Predeterminado: verdadero
De forma predeterminada, todas las solicitudes se envían de forma asíncrona (es decir, se establece en verdadero de forma predeterminada). Si necesita solicitudes síncronas, establezca esta opción en falso.

Así que en su solicitud, debe hacer async: false lugar de async: "false" .

Actualización :

El valor de retorno de ajaxSubmit no es el valor de retorno de success: function(){...} . ajaxSubmit no devuelve ningún valor, lo que equivale a undefined , que a su vez se evalúa como verdadero.

Y esa es la razón por la que el formulario siempre se envía y es independiente de enviar la solicitud de forma síncrona o no.

Si solo desea enviar el formulario, cuando la respuesta sea "Successful" , debe devolver false de ajaxSubmit y luego enviar el formulario en la función de success , como @halilb ya sugirió.

Algo en este sentido debería funcionar.

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;
}

Answer 3

En lugar de agregar el evento OnSubmit, puede evitar la acción predeterminada para el botón de envío.

Así, en el siguiente html:

<form name="form" action="insert.php" method="post">
<input type=''submit'' />
</form>​

en primer lugar, evitar la acción del botón de envío. Luego realice la llamada ajax de forma asíncrona y envíe el formulario cuando la contraseña sea correcta.

$(''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
}
}
});
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 4

Es tan simple como el de abajo, y funciona como un amuleto.

Mi solución responde perfectamente a su pregunta: cómo hacer que la solicitud JQuery-AJAX sea sincrónica

Configure ajax en sincrónico antes de la llamada ajax, y luego reinícielo después de su llamada ajax:

$.ajaxSetup({async: false});
$ajax({ajax call....});
$.ajaxSetup({async: true});

En tu caso se vería así:

$.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});

Espero que ayude :)

Answer 5

agregado dataType como json ... hizo la respuesta como 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
}

Answer 6

prueba esto

La solución es trabajar con devoluciones de llamada como esta.

$(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;
}
});
});