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)

Answer 2

如果您要加载需要执行的HTML和Javascript，并且您不想加载新页面的唯一原因是保留周围的元素，您可以将表单粘贴到IFRAME中。表单POSTed时，只有IFRAME的内容被替换为新内容。也不需要AJAX。您可能会发现answers here为您提供了足够的指导，或Google可能会发布“表格发布到iframe”等内容。

Answer 3

我希望表单能够多次发送，因此用户可以更新图表，但我不希望页面每次都重新加载。

一般模式如下：

生成XMLHttpRequest（在表单的onsubmit或它的'submit'按钮onclick处理程序），转到Python脚本。（可选）禁用提交按钮。
服务器端 - 生成图表（假设原始HTML + JS，正如您对另一个答案的评论所暗示的那样）
客户端，XmlHttp响应处理程序。使用通过响应获得的HTML替换页面的必要部分。从请求中获取responseText（它包含您生成的Python脚本）并设置显示图表的控件的innerHtml。

关键点是：

使用XMLHttpRequest（以便浏览器不会自动将您的页面替换为响应）。
在响应处理程序中自己操作页面。 innerHtml只是其中一个选项。

修改：Here是创建和使用XMLHttpRequest的简单示例。 JQuery使它变得更加简单，这个例子的价值在于了解它是如何工作的。“

Answer 4

更新img.src处理程序中的onsubmit()属性。

img.src url指向应该生成响应图像的Python脚本。
onsubmit()。

Python生成的动态刷新页面

4 个答案: