flask框架下,实现luckySheet用loadUrl从后端获取json数据,渲染在前端表格
时间: 2024-05-03 09:21:15 浏览: 182
详解vue渲染从后台获取的json数据
1. 在Flask框架中创建一个路由,用于处理前端请求获取json数据。
```python
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/get_data')
def get_data():
# 从后端获取json数据
data = {"data": [[1,2,3],[4,5,6],[7,8,9]]}
return jsonify(data)
```
2. 在前端页面中使用luckySheet的loadUrl方法获取后端返回的json数据。
```javascript
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script>
$(function(){
$("#luckysheet").luckysheet({
loadUrl:"/get_data", // 请求后端获取json数据
title: "My Title",
lang: "zh",
...
});
});
</script>
```
3. 在前端页面中添加一个div元素,作为luckySheet表格的容器。
```html
<div id="luckysheet"></div>
```
4. 运行Flask应用程序,在浏览器中打开前端页面,即可看到从后端获取的json数据渲染在luckySheet表格中。
阅读全文