異步加載網(wǎng)頁示例

2023-02-07 15:36 作者:蕪湖小量化 0人讀過 | 我要投稿

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

# 使用的庫?

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

# 先準(zhǔn)備異步加載的服務(wù)端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)

# 準(zhǔn)備異步加載的html網(wǎng)頁

<!DOCTYPE?html>
<html?lang="en">
<head>
? ?<meta?charset="UTF-8">
? ?<title>異步加載虛擬偶像網(wǎng)頁</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">虛擬偶像運(yùn)營</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>