将HTML中的变量数据传递到Flask
在Web开发中，经常需要将前端HTML页面中的数据传递到后端Flask应用进行处理。如果这些数据是静态的，可以直接在Jinja模板中构建URL。但如果数据是动态的，例如来自JavaScript变量，则需要结合Jinja和JavaScript来实现。
问题：为什么直接在Jinja模板中使用JavaScript变量行不通？
Jinja模板引擎在服务器端渲染HTML页面时，会将{{ ... }}中的内容替换为相应的值。当你在Jinja模板中使用JavaScript变量时，例如'{{ url_for( "move_forward" , title=data) }}'，Flask/Jinja并不知道data是什么，因为它无法与JavaScript交互。Jinja只是尝试替换一个字符串，而data变量的值只存在于客户端的JavaScript环境中。
解决方案：结合Jinja和JavaScript动态构建URL
立即学习“前端免费学习笔记（深入）”；
要解决这个问题，可以将URL的基本部分使用Jinja生成，然后使用JavaScript将变量值添加到URL中。
以下是一个示例：
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
代码解释：
- var baseUrl = '{{ url_for("move_forward") }}';: 这行代码使用Jinja的url_for函数生成move_forward路由的基本URL。url_for函数会根据Flask应用中的路由配置生成正确的URL，例如/move_forward。这个URL是在服务器端生成的，并且会嵌入到HTML页面中。
- var data = "shan";: 这行代码定义了一个JavaScript变量data，并赋值为"shan"。这可以是任何动态生成的值，例如用户输入或从其他JavaScript函数获取的值。
- window.location.href = baseUrl + "/" + data;: 这行代码使用JavaScript将基本URL和变量data的值拼接在一起，然后将window.location.href设置为新的URL。这会导致浏览器重定向到新的URL，并将data的值作为参数传递给Flask路由。
Flask后端代码：
from flask import Flask
app = Flask(__name__)
@app.route("/move_forward/")
def move_forward(title):
print(title)
return f"Received title: {title}"
if __name__ == '__main__':
app.run(debug=True)</pre><p><strong>代码解释：</strong></p>
<ol>
<li>
<strong>@app.route("/move_forward/<title>") : 这行代码定义了一个Flask路由，它接受一个名为title的参数。表示URL中的一个变量部分，Flask会将这部分的值传递给move_forward函数。
注意事项：
- 确保Flask路由中的参数名称与JavaScript代码中传递的参数名称匹配。
- 如果需要传递多个变量，可以使用&符号将它们连接在一起，例如baseUrl + "/" + data1 + "¶m2=" + data2。
- 考虑对传递的数据进行URL编码，以确保特殊字符能够正确传递。可以使用JavaScript的encodeURIComponent()函数进行编码。
- 如果需要传递大量数据，或者数据比较复杂，可以考虑使用POST请求，并将数据作为请求体发送。
总结：
通过结合Jinja模板和JavaScript，可以灵活地将HTML页面中的变量数据传递到Flask后端。这种方法允许动态构建URL，并将变量值作为参数传递给Flask路由，从而实现更复杂的Web应用功能。 记住，Jinja在服务器端运行，而JavaScript在客户端运行，理解这一点对于正确地将两者结合使用至关重要。
