[解決済み] jquery - 成功時にajaxの結果を使用して値を返す

質問内容

jQueryでちょっとした問題があります。 $.ajax() 関数を使用します。

ラジオボタンをクリックするか、ドロップダウンメニューから選択するたびに、選択された値のセッション変数が作成されるようなフォームがあるのですが、このような場合、どのようにすればよいのでしょうか？

さて、4つのオプションがあるドロップダウンメニューのうち、最初の1つ（ラベルはNone）には value="" にはそのIDが表示されます。

しかし、この特定の選択名を持つセッションがまだ存在しない場合のみ、セッションが作成されます。

意味があるかどうかわかりませんが、コードを見てみてください。

$("#add_ons select").change(function() {
        // get current price of the addons
        var order_price_addon = $(".order_price_addon").text();
        // get price of the clicked radio button from the rel attribute
        var add = $(this).children('option').attr('label');
        var name = $(this).attr('name');
        var val = $(this).val();
        
        
        if(val == "") {
            var price = parseInt(order_price_addon) - parseInt(add);
            removeSession(name);
        } else {
            if(isSession(name) == 0) {
                var price = parseInt(order_price_addon) + parseInt(add);
            }   
            setSession(name, val);              
        }
        
        $(".order_price_addon").html(price);    
        setSession('order_price_addon', price);         
        updateTotal();
});

というわけで、まず最初に #add_ons select menuがquot;change"をトリガーすると、いくつかの要素から値を取得して計算します。

合計に追加される値を格納するオプションの label 属性をセレクトから取得し、この名前でセッションを作成し、後でどれが選択されたかをチェックするための値を取得します。

をチェックします。 val == "" (これは None オプションが選択されたことを示します) そして、合計から金額を差し引くと同時に、セレクトの名前を持つセッションを削除します。

この後が問題の始まりです。 else ステートメントを使用します。

Else - このメソッドは isSession() もし0を返したら、label属性に保存されている値を合計に加えます。しかし1を返したら、それはセッションがすでに存在していることを示唆します。

さて isSession 関数は次のようになります。

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
            return data;
        },
        error: function() {
            alert('Error occured');
        }
    });
}

さて、問題は return が関数から結果を返すとは思えないのですが、success: セクションにある "data" を alert() - を実行すると、正しい値が返されるようです。

関数から値を返して、次のステートメントで比較する方法をご存知の方はいらっしゃいますか？

皆さんありがとうございます。以下の方法で試してみました。

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
            updateResult(data);
        },
        error: function() {
            alert('Error occured');
        }
    });
}

とすると updateResult() 関数を使用します。

function updateResult(data) {
    result = data;
}

result - はグローバル変数で、これを読み取ろうとしているのです。

$("#add_ons select").change(function() {
        // get current price of the addons
        var order_price_addon = $(".order_price_addon").text();
        // get price of the clicked radio button from the rel attribute
        var add = $(this).children('option').attr('label');
        var name = $(this).attr('name');
        var val = $(this).val();
        
        
        if(val == "") {
            var price = parseInt(order_price_addon) - parseInt(add);
            removeSession(name);
        } else {
            isSession(name);
            if(result == 0) {
                var price = parseInt(order_price_addon) + parseInt(add);
            }   
            setSession(name, val);              
        }
        
        $(".order_price_addon").html(price);    
        setSession('order_price_addon', price);         
        updateTotal();
    });

しかし、なぜかうまくいきません。

解決方法は？

問題は、AJAXリクエストのような非同期呼び出しから値を返しても、それが動作することを期待できないことです。

なぜなら、レスポンスを待っているコードは、レスポンスを受信した時点ですでに実行されているからです。

この問題を解決するには、必要なコードを実行することです。 内部 その success: コールバックを使用します。そうすることで data が利用可能なときだけです。

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
            // Run the code here that needs
            //    to access the data returned
            return data;
        },
        error: function() {
            alert('Error occured');
        }
    });
}

もうひとつの方法として（実質的には同じことですが）、MapReduceメソッドの内部で関数を呼び出すこともできます。 success: コールバックは、データが利用可能になったときにそのデータを渡します。

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
                // Call this function on success
            someFunction( data );
            return data;
        },
        error: function() {
            alert('Error occured');
        }
    });
}

function someFunction( data ) {
    // Do something with your data
}