0

フォームから JavaScript に値を渡す際の問題を解決しようとしています。

これがコードです。Python スクリプトはシームレスに機能し、フォームの値が毎回文字列を返す場合に使用されます。

<head>
    <title>Line Chart</title>
    <script>
        function clickme() {
        putgraph();
        }
    </script>
    <script>
        function alertbox() {
                alert(ajaxResponse);
        }
    </script>
    <script src="Chart.js"></script>
    <script src="jquery.js"></script>
    <script>
                    function drawgraph(z) {
                            var v = document.getElementById("frmvar");
                            v.value = z;
                            return draw();
                    };
                    function draw() {
                            var ajaxResponse=null;
                            $.ajax({
                            url: "/currentcost.py",
                            data: $("form[name='frm']").serialize(),
                            success: function(response){
                                    ajaxResponse=response;
                                    }, async: false
                            });
                    return ajaxResponse;
                    }
    </script>
    <script>
    function putgraph()
            {
            tg=drawgraph("t");
            alert(tg);
                    var lineChartData = {
                            labels : ["January","February","March","April","May","June","July"],
                            datasets : [
                                    {
                                            fillColor : "rgba(220,220,220,0.5)",
                                            strokeColor : "rgba(220,220,220,1)",
                                            pointColor : "rgba(220,220,220,1)",
                                            pointStrokeColor : "#fff",
                                            data : [tg]
                                            // data : [65,59,90,81,56,55,40]
                                    },
                            ]
                    }

                    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
            }
    </script>

    <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
    <style>
            canvas{
            }
    </style>
</head>

何が起こるかは次のとおりです。

ユーザーがフォームの操作を完了したら、ボタンをクリックしてフォームを送信しますclickme。上部の機能が実行されます。それはputgraphうまくいくと思いますが、それは間違っていると思います。

すべての AJAX コールバックが配置されており、すべてをまとめる前に機能しているにもかかわらず、関数が終了する前に開始することを示唆する警告ウィンドウがputgraph表示されます。"undefined"putgraphdrawgraph

Javascriptが非同期であることは知っていますが、コールバックハンドラーを使用することで、関数drawgraphと関数がその問題を「克服」したと思いました。draw

私が間違っていることを見て、それを正しくする方法を提案することをお勧めします。

アップデート：

答えてくれたすべての人に感謝します。上記のスクリプトを、使用した回答で編集しました。async キーワードは、厄介なコールバック手順をすべて排除したため、非常に便利であることがわかりました。HTHは他の誰かです:-)

4

2 に答える 2

0

Collin が言ったように、「drawgraph」は「draw()」のみを呼び出すため、何も返しません。「handleResource()」というコールバック関数があります。デバッグのために、そこに「alert()」呼び出しを追加してみてください。これにより、応答が生成されます。

詳しくは、「draw()」がすぐに終了し、「$.ajax()」呼び出しが並行して実行されることを理解してください (「スレッド」のように考えてください)。したがって、あなたの例で唯一の有効な出口点は「function handleResource(response)」(「success:」関数で呼び出されます) です。

以下を試すことができます（テストされていません）：

    function drawgraph(z, callback) {
            var v = document.getElementById("frmvar");
            v.value = z;
            function handleResponse(response) {
                    ajaxResponse = response;
                    callback(response); // this will call a function given as parameter to "drawgraph"
            }
            draw(handleResponse);
    };

そして、呼び出しを次のように変更します。

    tg=drawgraph("t", function (response) {
      alert(response);
    });

これにより、「応答」を含む警告ボックスが生成されます。

HTH、

于 2013-09-27T21:39:41.877 に答える