javascript - Python生成的动态刷新页面

Question

几个月来我一直断断续续地研究这个问题，但我无法找到明确的方向。

我的目标是拥有一个页面，上面有一个表格和一个图表。可以填写表单，然后将其发送到 CGI Python 脚本(是的，我稍后会转到 WSGI 或 fast_cgi，我从简单开始!)我希望表单能够发送多次，所以用户可以更新图表，但我不希望每次更新时都重新加载页面。我现在有一个表格和一个图表，但它们位于不同的页面上并作为常规脚本工作。

我想避免使用除 JQuery 之外的所有框架(因为我喜欢它，不喜欢处理不同浏览器的怪癖等)。

在正确的方向上轻推是我在这里所要求的，或者尽可能具体。

(我相信我已经找到了在 PHP 中执行此操作的类似指南，但出于某种原因，它们没有达到我的目的。)

编辑:该图是使用 Flot(一个 JQuery 插件)生成的，使用从表单输入生成的点并在 Python 脚本中处理。 Python 脚本打印最终生成图形的 Javascript。这一切都可以用 Javascript 完成，但我希望更重的东西在服务器端处理，因此使用 Python。

谢谢!

Answer 1

我假设您现在有两个页面 - 一个显示表单的页面，以及一个接收 POST 请求并显示图形的页面。

会一点点 jQuery 你就可以做你想做的事。

首先向您的表单页面添加一个带有 id="results" 的空 div。接下来，在您的图表绘制页面中，将您想要显示给用户的输出放在具有相同 ID 的 div 中。

现在将 onclick 处理程序附加到提交按钮(或者附加到表单的各个部分，如果您希望它更加动态)。这应该序列化表单，将其提交到绘图页面抢夺 id="results" div 的内容并将它们填充到 id="results" div 上表单页面。

每当用户点击提交时，这将显示为页面上显示的图表。

这是您需要的 jQuery 代码的草图

$(function(){
    // Submit form
    // Get the returned html, and get the contents of #results and
    // put it into this page into #results
    var submit = function() {
        $.ajax({
            type: "POST",
            data: $("form").serialize(),
            success: function(data, textStatus) {
                $("#results").replaceWith($("#results", $(data)));
            }
        });
    };
    $("form input[type=submit]").click(submit);
    // I think you'll need this as well to make sure the form doesn't submit via the browser
    $("form").submit(function () { return false; });
});

编辑

只是为了澄清上面的内容，如果您希望表单在用户单击任何控件时重绘图形，而不仅仅是在用户单击提交时，添加更多类似这样的东西

$("form input[type=text]").keypress(submit);
$("form input[type=checkbox], form select").change(submit)