首页用flask实现前后端连接示例代码

用flask实现前后端连接示例代码

时间: 2024-03-01 10:55:54 浏览: 69

下面是一个使用Flask实现前后端连接的示例代码：前端代码（HTML页面）： ```HTML <!DOCTYPE html> <html> <head> <title>Flask Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Flask Example</h2> <button type="button" onclick="loadDoc()">Click Here</button> <p id="demo"></p> <script> function loadDoc() { $.ajax({ url: "/get_data", //后端处理程序的URL type: "POST", data: {"name": "Tom", "age": "28"}, //发送给后端的数据 dataType: "json", //指定返回的数据格式为JSON success: function(result) { $("#demo").html("Name: "+result.name+", Age: "+result.age); //将返回的结果显示在页面上 }, error: function(error) { console.log(error); } }); } </script> </body> </html> ``` 后端代码（Python文件 app.py）： ```Python from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/get_data', methods=['POST']) def get_data(): name = request.form['name'] #获取前端发送的数据 age = request.form['age'] response = {"name": name, "age": age} #处理数据，将数据存储在字典中 return jsonify(response) #将处理后的结果以JSON格式返回给前端 if __name__ == '__main__': app.run(debug=True) ``` 这段代码中，使用Flask框架搭建了一个后端处理程序，并定义了一个"/get_data"的路由，使用POST方法接收前端发送的数据，并将处理后的结果以JSON格式返回给前端。在Python中使用Flask框架很简单，只需要导入Flask类并实例化一个对象即可。然后，使用@app.route()装饰器定义路由，使用request对象获取前端发送的数据，使用jsonify函数将处理后的数据转换为JSON格式，最后使用return语句将JSON格式的数据返回给前端。

阅读全文