如何在 UI 状态更改时更新 wtf-form 状态？

Question

到目前为止，这是我使用 WTF 表单并根据用户活动更新其状态的流程：

在我的 template.html 我有：

<form action="{{ url_for('page') }}" method="POST">
    <select id="sel_id" name="name1" onchange="this.form.submit();">
    ...
    </select>
</form>

... 在 views.py 我得到了：

@app.route('/')
@app.route('/process', methods=['GET', 'POST'])
def process():
    form = NoNameForm()
    if request.method == 'POST':
        if 'name1' in request.form:                        
            form.colors = int(request.form['name1'])

在这种情况下，这是使用 WTF 表单和更新变量（例如 form.colors）的正确方法吗？ 我想知道我是否可以直接在“onchange”这段 js 代码中直接更新form.colors。

Answer 1

我认为在这种情况下没有一个“正确”的方式——正确的方式取决于你想要达到的目标。

A. 如果 - 例如 - 由于某种原因您不想弄乱 JavaScript 并且不介意重新加载页面，那么您可以像在代码示例中那样做。

B. 另一方面，如果您只是想重新加载页面以更改表单颜色，那么我会说这是一种开销，而简单的 JS 脚本会更加优雅和用户友好案例。

编辑回答评论问题：

你能解释一下“重新加载页面”吗？

当您的浏览器使用标准 HTTP 方法（如 GET 和 POST）与服务器通信以交换数据时，它必须在从服务器。
另一方面，如果您的页面使用 AJAX（异步 JavaScript 和 XML），则情况并非如此。引用Wikipedia的话题：

使用 Ajax，Web 应用程序可以向一个 服务器异步（在后台）而不干扰 现有页面的显示和行为。通过解耦数据 表示层的交换层，Ajax 允许 Web 页面，以及扩展的 Web 应用程序，以更改内容 动态，无需重新加载整个页面。

如果我决定使用 JS 并且不重新加载页面，我会在选项“A”中丢失什么？

任何一种方式都有其优点和缺点，由您决定哪条路要走。

引用this文章：

Ajax 的主要优势：
1. 它使事情变得简短而快速。
2.摆脱重新加载页面。
3. 对实时应用非常有用。
4. 减少服务器负载，节省带宽。

Ajax 的主要缺点：
1. 书签问题。
2. 对 SEO 非常不利。
3.屏幕阅读器无法访问ajax。
4. 只有现代浏览器支持，如果用户端没有启用javascript，你的网站会很丑。

使用 JS 是否意味着不会重新加载页面？
如果您使用 Ajax 与服务器和 JS 交换数据以将结果放在您的网站上，那么可以 - 不需要重新加载。

回到您的代码示例 - 如果您只是出于演示原因而想更改表单颜色，而对于您的应用程序来说表单具有哪种颜色并不重要，那么就没有理由在服务器端执行此操作。