Question

我总是使用标准的Flask命令render_template()来渲染我的模板。整个模板只是静态的，但有一种形式，在用户输入和一个图像滑块之后会发生变化。现在问题是：当用户提交他/她的输入时，wohle模板会被重新渲染。

我是否可以更新表单数据并保持页面的其余部分不变？

我的模板看起来像这样：

<html>
<head>
</head>
<body>
<form action="/" method ="POST" id="Form">
    {{msform.ms_1}} is to {{msform.ms_2}} like {{msform.ms_3}} is to {{msform.ms_submit}}
</form>
</body>
</html>

我的views.py如下：

@app.route('/', methods=(['GET','POST'])
def index():
    if request.method == 'POST':
        msform = msForm(request.form, prefix='ms')
        msform.ms_submit.label.text= msform.ms_3.data + msform.ms_2.data
        return render_template(template, msform=msform)
    return render_template(template, msform=msform)

我应该在哪里找到第一个答案？谢谢，FFoDWindow

Answer 1

如果您希望表单在不重新加载while页面的情况下发送带有数据的请求，那么解决方案是使用Javascript使用XHR请求（AJAX请求）发送表单数据。

服务器在将模板发送到浏览器之后无法刷新模板的一部分。 HTTP是无状态的，因此在您的浏览器发出提交请求后，服务器会回复您呈现的模板，而这就是它。

如果您需要＆＃34;替换＆＃34;或者＆＃34;重新渲染＆＃34;只是页面的一部分没有完整页面重新加载，你需要Javascript和XHR请求。

您需要创建Flask端点以接收POSTed数据。使用jQuery的示例：

$("#your-form").submit(function(e) {
    e.preventDefault(); // Prevent the normal form submit

    $.ajax({
           type: "POST",
           url: '/your-api',
           data: $("#your-form").serialize(),
           success: function(data) {
               // Do something here. For example, the server can return JSON here and you use Js to create the template client-side, or you server can return an HTML fragment and here you append it to a dom node
           }
         });
});

通常，这些端点返回JSON，但是如果你想尽可能地坚持你的服务器端模板，你可以返回重新渲染的表单作为对AJAX调用的响应，然后用jQuery追加响应容器元素，有效地替换表单。

让我们假设您使用Jinja2作为模板引擎。然后，当您第一次渲染整个页面时，您可以获得通常包含在主模板中的表单的部分内容。然后，当您在提交时响应AJAX请求时，您可以呈现相同的部分。

希望这有用。

不要使用Flask渲染整个模板

1 个答案: