在一个Flask项目中如何嵌入JavaScript代码
时间: 2023-05-28 14:05:53 浏览: 101
可以在HTML模板中使用<script>标签来嵌入JavaScript代码,例如:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flask JavaScript Example</title>
</head>
<body>
<h1>Flask JavaScript Example</h1>
<p>Click the button to change the text:</p>
<button onclick="changeText()">Click me</button>
<p id="text">Original text</p>
<script>
function changeText() {
document.getElementById("text").innerHTML = "New text";
}
</script>
</body>
</html>
```
在这个例子中,使用了一个简单的JavaScript函数来改变页面上的文本内容。该函数被绑定到一个按钮上,当用户点击按钮时就会执行该函数。
在Flask中,可以使用render_template函数来渲染HTML模板并将其返回给客户端。例如:
```python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
```
在这个例子中,当用户访问根路径时,Flask会渲染名为index.html的模板并将其返回给客户端。在模板中可以嵌入任何需要的JavaScript代码。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)