web-dev-qa-db-fra.com

Comment rendre synchrone la requête JQuery-AJAX

Comment synchroniser une demande ajax?

J'ai un formulaire qui doit être soumis. Mais il doit être soumis uniquement lorsque l'utilisateur entre le mot de passe correct.

Voici le code du formulaire:

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

Et le code jquery pour l'envoi et la vérification du mot de passe est le suivant:

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

Cependant, le formulaire est toujours soumis, quelle que soit la valeur retournée par la demande ajax. J'ai vérifié tout le reste. La valeur d'arr se révèle être "réussie" lorsque le mot de passe correct est entré et fonctionne correctement vice versa également.

Comment puis-je rendre cette demande synchrone? dans la mesure où je peux déboguer, la demande est asynchrone, le formulaire est donc soumis avant la fin de la demande.

Code pour 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;
?>

Mise à jour: la solution a été trouvée.

Comme l'a souligné Olaf Dietshche: La valeur de retour de ajaxSubmit n'est pas la valeur de retour de la success: function(){...}. ajaxSubmit ne renvoie aucune valeur, ce qui équivaut à undefined, qui à son tour est évalué à true.

Et c'est la raison pour laquelle le formulaire est toujours soumis et est indépendant de l'envoi de la demande synchrone ou non.

Ainsi, j'ai défini une variable sur 1 Dans la fonction de réussite en cas de succès. Et vérifié sa valeur hors de la fonction de réussite, si elle était 1 En dehors de la fonction de réussite, alors j'ai écrit return true ... else return false. Et ça a marché.

Code de travail mis à jour:

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;
    }
}
jqueryajaxsynchronous
19
Kanishk Dudeja

De jQuery.ajax ()

async Booléen
Par défaut: vrai
Par défaut, toutes les demandes sont envoyées de manière asynchrone (c'est-à-dire que cela est défini sur true par défaut). Si vous avez besoin de demandes synchrones, définissez cette option sur false.

Donc, dans votre demande, vous devez faire async: false Au lieu de async: "false".

Mise à jour :

La valeur de retour de ajaxSubmit est pas la valeur de retour de la success: function(){...}. ajaxSubmit ne renvoie aucune valeur, ce qui équivaut à undefined, qui à son tour est évalué comme vrai.

Et ça est la raison pour laquelle le formulaire est toujours soumis et est indépendant de l'envoi de la demande synchrone ou non.

Si vous souhaitez soumettre le formulaire uniquement, lorsque la réponse est "Successful", Vous devez renvoyer false à partir de ajaxSubmit, puis soumettre le formulaire dans la fonction success , comme l'a déjà suggéré @halilb.

Quelque chose dans ce sens devrait fonctionner

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;
}
33
Olaf Dietsche

C'est aussi simple que celui ci-dessous et fonctionne comme un charme.

Ma solution répond parfaitement à votre question: comment rendre synchrone la requête JQuery-AJAX

Définissez ajax sur synchrone avant l'appel ajax, puis réinitialisez-le après votre appel ajax:

$.ajaxSetup({async: false});

$ajax({ajax call....});

$.ajaxSetup({async: true});

Dans votre cas, cela ressemblerait à ceci:

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

J'espère que ça aide :)

4
Kaszoni Ferencz

Au lieu d'ajouter un événement onSubmit, vous pouvez empêcher l'action par défaut du bouton d'envoi.

Donc, dans le html suivant:

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

tout d'abord, empêchez l'action de bouton d'envoi. Effectuez ensuite l'appel ajax de manière asynchrone et soumettez le formulaire lorsque le mot de passe est 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
            }
        }
    });
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
2
halilb

a ajouté le type de données comme json ... a fait la réponse comme json ..

PHP 

echo json_encode(array('success'=>$res)); //send the response as json **use this instead of echo $res in ur 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
}
1
bipen

Pouvez-vous essayer cela,

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

essaye ça

la solution est de travailler avec des rappels comme celui-ci

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

    });
 });
0
silly