异步加载网页示例

2023-02-07 15:36 作者:芜湖小量化 0人读过 | 我要投稿

1.首先建立工程文件夹project 在project文件夹下建立static和templates文件

# 使用的库

from flask import Flask, render_template
from flask import make_response
import json

# 先准备异步加载的服务端app

from flask import Flask, render_template
from flask import make_response
import json
app = Flask(__name__)

@app.route('/')
def index():
return render_template('test.html')

@app.route('/data')
def data_():
data = [{'id': '1', 'name': '嘉然', 'href': 'href="https://space.bilibili.com/672328094?spm_id_from=333.337.0.0";'},
{'id': '2', 'name': '星瞳', 'href': 'href="https://space.bilibili.com/401315430?spm_id_from=333.337.0.0";'},
{'id': '3', 'name': '露米', 'href': 'href="https://space.bilibili.com/2000609327?spm_id_from=333.337.0.0";'}]
response = make_response(json.dumps(data))
return response

if __name__ == '__main__':
app.run(host='0.0.0.0', port=8888)

# 准备异步加载的html网页

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步加载虚拟偶像网页</title>
<script src="../static/jquery-3.6.3.js"></script>
</head>
<body onload="onLoad()">

<h1 style="color: hotpink; font-size:26px; font-family: '楷体','Arial',sans-serif">虚拟偶像运营</h1>

<ul id="video_list">

<li style="color: plum">perfectworld</li>
<li style="color: yellowgreen">tencent</li>
<li style="color: cornflowerblue">bytedance</li>

</ul>
<script>

function onLoad()
{
$.get("/data", function(result){
data = JSON.parse(result)
for(var i = 0; i < data.length;i++) {
$('#video_list').append('<br>' + '<a ' + data[i].href + '>' + data[i].name + '</a>' + '<br>')
}
});
}

</script>
</body>
</html>