Question

我正在尝试解决将表单中的值传递给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是异步的，但我认为drawgraph和draw函数通过使用回调处理程序“克服”了这个问题。

非常感谢有些人关注这一点，看看我做错了什么，最好还是建议如何做对。

更新：

感谢所有回答的人。我用我使用的答案编辑了上面的脚本。我发现async关键字非常有用，因为它消除了所有杂乱的回调过程。 HTH是其他任何人： - ）

Answer 1

您需要在回调中调用内部的函数，而不是在回调后调用。

如果你的回调只做“变量=值”，那么当你只是调用另一个函数时，不能保证变量会被设置。

e：此外，你的绘图没有返回任何内容，所以即使你的方法确实有效，你也不会将数据传回去。

Answer 2

Collin说你的“绘图”没有返回任何内容，因为它只调用“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，

通过ajax将表单字段传递给python并处理返回

2 个答案: