首页flask前端得到后端的数据返回一个弹窗界面怎么实现

flask前端得到后端的数据返回一个弹窗界面怎么实现

时间: 2024-02-26 16:57:00 浏览: 484

要实现这个功能，你需要在后端使用 Flask 的路由返回数据，然后在前端使用 Ajax 请求该路由获取数据，并将数据传递给弹窗界面显示。后端代码示例： ```python from flask import Flask, jsonify, render_template app = Flask(__name__) @app.route('/data') def get_data(): data = {'name': 'John', 'age': 25} return jsonify(data) @app.route('/') def index(): return render_template('index.html') ``` 在前端，你需要使用 jQuery 发送 Ajax 请求并将返回的数据显示在弹窗中。代码示例： ```html <!DOCTYPE html> <html> <head> <title>Flask Popup Demo</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <button onclick="showPopup()">显示弹窗</button> <div id="popup" style="display: none;"> <h1>用户信息</h1> <div id="data"></div> </div> <script> function showPopup() { $.get('/data', function(data) { $('#data').html('<p>姓名：' + data.name + '</p><p>年龄：' + data.age + '</p>'); $('#popup').show(); }); } </script> </body> </html> ``` 这里我们在页面中添加了一个按钮，点击按钮调用 showPopup() 函数，该函数使用 jQuery 发送 Ajax 请求获取数据并将数据显示在弹窗中。弹窗的 HTML 代码在页面中预先定义，并使用 CSS 隐藏。当数据获取成功后，我们将弹窗显示出来。

阅读全文