一、通过Ajax向后端发送请求
Ajax是一种在不刷新整个页面的情况下，向Web服务器请求新数据或者更新现有数据的技术。在Python中，我们可以使用Flask框架来实现向Web服务器发送请求的功能。Flask的安装非常简单，可以通过pip来进行安装。以下是一个使用Flask框架响应Ajax请求的实例代码：
from flask import Flask, render_template, jsonify app = Flask(__name__) @app.route("/data") def data(): # 这里模拟了一个数据源，实际情况中可能从数据库等其他地方获取数据 data = {"name": "Tom", "age": 18} # jsonify将数据转为json格式，然后再返回给前端 return jsonify(data) if __name__ == "__main__": app.run()
以上代码中，我们使用Flask框架创建了一个名为data的路由，并在该路由中返回了一个数据字典。在JS中，则可以使用fetch API来向后端发送Ajax请求，并通过.then()函数获取到响应的数据，然后将数据展示在网页中。以下是JS的示例代码：
fetch('/data') .then(response => response.json()) .then(data => { // 操作数据，将数据展示在前端页面上 });
二、使用模板引擎
在Web开发中，有很多种模板引擎可以使用，其中比较常用的是jinja2，它也是Flask默认使用的模板引擎。使用模板引擎可以将后端数据传到前端页面中，在前端页面中使用JS来操作数据。以下是Python代码示例：
from flask import Flask, render_template app = Flask(__name__) @app.route("/") def index(): # 这里模拟了一个数据源，实际情况中可能从数据库等其他地方获取数据 data = {"name": "Tom", "age": 18} # 传递数据给前端页面 return render_template("index.html", data=data) if __name__ == "__main__": app.run()
以上代码中，我们使用Flask框架创建了一个名为index的路由，并在该路由中传递了一个名为data的数据字典。在前端页面中，我们可以使用jinja2的语法来获取数据并展示在前端页面上。以下是HTML模板示例代码：
<html> <head> <title>{{ data.name }}</title> </head> <body> <h1>{{ data.name }}</h1> <p>{{ data.age }}</p> <script> // 在此处使用JS操作数据 </script> </body> </html>
三、将数据保存为JSON文件
在Python中，我们可以将数据保存为JSON文件，然后在JS中读取该文件来操作数据。Python中自带了一个json模块，可以方便地实现将数据序列化为JSON格式的字符串，或者将JSON字符串反序列化为Python对象。以下是Python代码示例：
import json # 这里模拟了一个数据源，实际情况中可能从数据库等其他地方获取数据 data = {"name": "Tom", "age": 18} # 将数据保存为json文件 with open("data.json", "w") as f: json.dump(data, f)
在JS中，则可以通过AJAX请求读取JSON文件并操作其中的数据。以下是JS示例代码：
fetch('data.json') .then(response => response.json()) .then(data => { // 操作数据，将数据展示在前端页面上 });
