flask与js数据交互

在js与html文件分离情况下,如何实现将后端flask框架下的数据传送给前端外部的js文件里?

您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

前端发送异步请求并绑定回调函数,后端以json格式数据响应。

js用ajax加载数据就行了

小demo

from flask import Flask, request,render_template
import json
app = Flask(__name__, static_url_path='')

@app.route('/data', methods=['POST','GET'])
def data():
   s=['张三','年龄','姓名']
   return json.dumps(s,ensure_ascii=False)
@app.route('/')
def index():
   return render_template("index.html")

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

templates\index.html

<meta charset="utf-8" />
<input type="button" id="btn" value="加载服务器数据" />
<div id="dvRst"></div>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script charset="utf-8" src="{{ url_for('static', filename='ajax.js')}}"></script>

ajax.js

$('#btn').click(function () {
    $.ajax({
        url: '/data', dataType: 'JSON',
        success: function (d) {
            $('#dvRst').html($(d).map(function () {
                return '<div>用户名:' + this + '</div>'
            }).get().join(''))
        },
        error: function (e) { alert('服务器错误\n' + e) }
    })
});