from flask import Flask,jsonify import pymysql app = Flask(__name__) conn = pymysql.connect( host='localhost', port=3306, user='root', password='hl123', db='codedq' ) cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) @app.route('/index') def index(): cursor.execute('select M_name,M_price from menus') data = cursor.fetchall() return jsonify(data) if __name__ == '__main__': app.run(debug=True) 在前端接收并显示这个接口的数据
时间: 2024-01-14 12:04:56 浏览: 139
基于Python的flask_app火电代码解析设计源码
要在前端接收并显示来自Flask接口的数据,您可以使用JavaScript来发送Ajax请求并处理响应。以下是一个示例,您可以将其添加到您的HTML文件中:
```html
<!DOCTYPE html>
<html>
<head>
<title>Flask API Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="responseContainer"></div>
<script>
// 发送Ajax请求
$.ajax({
url: "http://localhost:5000/index", // Flask接口的URL
type: "GET",
success: function(response) {
// 成功接收响应后的处理代码
var responseData = JSON.parse(response);
var responseContainer = document.getElementById("responseContainer");
// 在页面上显示数据
responseData.forEach(function(item) {
var name = item.M_name;
var price = item.M_price;
responseContainer.innerHTML += "<p>" + name + " - " + price + "</p>";
});
},
error: function(xhr, status, error) {
// 处理请求错误
console.log("发生错误:" + error);
}
});
</script>
</body>
</html>
```
在这个示例中,我们使用jQuery的`$.ajax`方法发送GET请求到Flask接口的URL。在`success`回调函数中,我们首先将响应解析为JSON对象,并使用`forEach`方法遍历每个菜单对象。然后,我们将菜单名称和价格添加到`responseContainer`元素中显示在页面上。
请注意,您需要将Flask接口的URL替换为正确的地址和端口号,以便与您的Flask应用程序匹配。
希望这个示例可以帮助您在前端接收和显示来自Flask接口的数据!如果您有任何进一步的问题,请随时询问。
阅读全文