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就是我认为它出错的地方。

putgraph显示中的警报窗口"undefined"向我建议该putgraph函数在drawgraph完成之前启动，尽管所有 AJAX 回调的东西都已到位，并且在我将它们放在一起之前工作！

我知道 Javascript 是异步的，但我认为drawgraphanddraw函数通过使用回调处理程序已经“克服”了这个问题。

真的很感激有人关注我做错了什么，最好还是建议纠正它的方法。

更新：

感谢所有回答的人。我用我使用的答案编辑了上面的脚本。我发现 async 关键字真的很有用，因为它消除了所有混乱的回调过程。HTH 是其他人 :-)

4

2 回答 2

0

正如科林所说，你的“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);
    });

这应该会产生一个包含“响应”的警报框。

高温下，

于 2013-09-27T21:39:41.877 回答
0

您需要在回调中调用类似的函数，而不是在回调之后。

如果您的回调只执行“variable = value”，则无法保证在您调用另一个函数时会设置变量。

e：此外，您的绘图图不会返回任何内容，因此即使您的方法确实有效，您也永远不会将数据传回。

于 2013-09-27T20:58:09.420 回答