web-dev-qa-db-ja.com

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;
?>
_

更新：ソリューションが見つかりました。

Olaf Dietshcheが指摘したように、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;
    }
}
_
jqueryajaxsynchronous
19
Kanishk Dudeja

jQuery.ajax（） から

asyncブール
デフォルト：true
デフォルトでは、すべてのリクエストは非同期で送信されます（つまり、これはデフォルトでtrueに設定されています）。同期リクエストが必要な場合は、このオプションをfalseに設定します。

したがって、リクエストでは、_async: false_の代わりに_async: "false"_を実行する必要があります。

更新：

ajaxSubmitの戻り値は、notsuccess: function(){...}の戻り値です。 ajaxSubmitは値をまったく返しません。これはundefinedと同等であり、これはtrueと評価されます。

そして、thatが理由であり、フォームが常に送信され、リクエストの同期送信の有無とは無関係です。

フォームのみを送信する場合、応答が_"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;
}
_
33
Olaf Dietsche

以下のようにシンプルで、魅力のように機能します。

私のソリューションはあなたの質問に完璧に答えます：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});

私はそれが役立つことを願っています:)

4
Kaszoni Ferencz

OnSubmitイベントを追加する代わりに、送信ボタンのデフォルトアクションを禁止できます。

したがって、次のHTMLで：

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

まず、送信ボタンアクションを禁止します。次に、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
            }
        }
    });
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
2
halilb

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
}
1
bipen

これを試してもらえますか、

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

これを試して

解決策は、このようなコールバックを使用することです

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