由Python生成的动态刷新页面

2 投票

4 回答

1332 浏览

提问于 2025-04-15 16:44

我这几个月一直在研究这个问题，但总是找不到明确的方向。

我的目标是创建一个页面，上面有一个表单和一个图表。用户可以填写表单，然后把数据发送给CGI的Python脚本（对，我以后会转到WSGI或fast_cgi，现在先简单点！）。我希望这个表单可以多次发送，这样用户就能更新图表，但我不想每次发送后页面都重新加载。我现在有一个表单和一个图表，但它们在不同的页面上，像传统的脚本那样工作。

我想避免使用所有框架，除了JQuery（因为我喜欢它，不想处理不同浏览器的各种问题等）。

我只希望能得到一些正确的方向，或者你可以尽量具体一点。

（我找到了类似的PHP指南，但出于某种原因，它们没有满足我的需求。）

编辑：这个图表是用Flot（一个JQuery插件）生成的，数据点是从表单输入生成的，然后在Python脚本中处理。Python脚本最后打印出生成图表的JavaScript。虽然所有这些都可以用JavaScript完成，但我希望更复杂的部分在服务器端处理，所以才用Python。

谢谢！

数据可视化 cgi ajax 表单处理服务器端处理 jquery 动态页面 Flot

4 个回答

我希望这个表单能够多次发送，这样用户就可以更新图表，但我不想每次发送时页面都重新加载。

大致的步骤是这样的：

在表单提交时（比如在表单的onsubmit事件或者提交按钮的onclick事件里），生成一个XMLHttpRequest，发送到你的Python脚本。可以选择禁用提交按钮。
在服务器端，生成图表（假设使用的是原始的HTML和JS，就像你在对其他回答的评论中提到的那样）。
在客户端，处理XMLHttp的响应。用响应中得到的HTML替换页面中需要更新的部分。获取请求的responseText（里面包含了你的Python脚本生成的内容），然后设置显示图表的控件的innerHtml。

关键点是：

使用XMLHttpRequest（这样浏览器就不会自动用响应内容替换你的页面）。
在响应处理程序中自己操作页面。innerHtml只是其中一种选择。

补充：这里有一个简单的例子，展示了如何创建和使用XMLHttpRequest。使用JQuery会简单很多，这个例子的价值在于让你了解它的工作原理。

回答于 2025-04-15 由 Python大师

分享举报

如果你需要加载一些HTML和JavaScript，并且你不想换页面的唯一原因是为了保留周围的元素，那么你可以考虑把表单放在一个IFRAME里。当你提交表单时，只有这个IFRAME里的内容会被新的内容替换掉。这样就不需要用到AJAX了。你可以看看这里的回答，或者在谷歌上搜索“表单提交到IFRAME”之类的内容，可能会找到你需要的方向。

回答于 2025-04-15 由 Python大师

分享举报

我假设你现在有两个页面，一个是显示表单的页面，另一个是接收POST请求并显示图表的页面。

用一点jQuery，你就可以实现你想要的效果。

首先，在你的表单页面添加一个空的div，给它一个id="results"的标识。接下来，在你的图表绘制页面，把你想展示给用户的内容放在一个同样有这个id的div里。

然后，把一个点击事件处理器绑定到提交按钮上（或者如果你想让它更动态，可以绑定到表单的各个部分）。这个处理器应该把表单的数据整理好，提交到绘图页面，然后抓取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)

回答于 2025-04-15 由 Python大师

分享举报

由Python生成的动态刷新页面

4 个回答

撰写回答