htmlJS输出Flask变量
时间: 2023-08-15 18:04:17 浏览: 55
在 Flask 中,你可以使用 Jinja2 模板引擎来渲染 HTML 页面并输出变量。但是,如果你想在 JavaScript 中访问 Flask 中的变量,可以采用以下两种方法:
1. 将变量作为 HTML 页面的一部分输出,然后使用 JavaScript DOM API 来获取该元素的值。例如:
在 Flask 中的路由函数中:
```python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
my_var = 'Hello World'
return render_template('index.html', my_var=my_var)
```
在 HTML 模板中:
```html
<!DOCTYPE html>
<html>
<head>
<title>Flask Variable output in JavaScript</title>
</head>
<body>
<h1>{{ my_var }}</h1>
<script>
var myVar = document.querySelector('h1').innerText;
console.log(myVar);
</script>
</body>
</html>
```
这里将 Flask 中的变量 `my_var` 渲染为 HTML 页面中的 `h1` 标签,然后在 JavaScript 中使用 DOM API 获取该标签的值。
2. 将变量作为 JSON 数据输出,并通过 AJAX 请求获取该数据。例如:
在 Flask 中的路由函数中:
```python
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/my_data')
def my_data():
my_var = 'Hello World'
return jsonify({'my_var': my_var})
```
在 HTML 模板中:
```html
<!DOCTYPE html>
<html>
<head>
<title>Flask Variable output in JavaScript</title>
</head>
<body>
<script>
fetch('/my_data')
.then(response => response.json())
.then(data => console.log(data.my_var));
</script>
</body>
</html>
```
这里通过 AJAX 请求获取 Flask 中的变量 `my_var`,然后在 JavaScript 中访问该数据。