美文网首页
flask+jsonp跨域前后台交互

flask+jsonp跨域前后台交互

作者: 灰斗儿 | 来源:发表于2020-04-09 22:16 被阅读0次

    jsonp原理: script,link,src 是不受同源策略影响的,并可提供callback参数回调,可调用已定义的js方法。可通过动态创建对应标签实现。

    # -*- coding: utf-8 -*-
    from flask import Flask, jsonify
    import psutil, time,json 
    app = Flask(__name__)#实例化app对象
    
    @app.route('/test_post/aa', methods=['GET','POST'])#路由
    def test_post():
         memKeys = ["total", "available", "percent", "used", "free"]#查看内存信息
        memVaules = psutil.virtual_memory()
         memInfo = dict(zip(memKeys, memVaules))
         memInfo = {k: str(v / pow(1024.0, 3)) + 'GB' for k,
                                                          v in memInfo.items() if k != 'percent'}
         memInfo['percent'] = psutil.virtual_memory().percent
         return "successCallback"+"("+json.dumps(memInfo)+")"#将结果以json形式返回,通过jsonp与前台交互
    
    if __name__ == "__main__":
         app.run(
         host = '0.0.0.0',#任何ip都可以访问
         port = 7777,#端口
         debug = True
     )
    
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script>
        $('#search').click(function () {
            $.ajax({
                type: 'GET',
                url: 'http://192.168.1.106:7777/test_post/aa',
                dataType: 'jsonp', //希望服务器返回json格式的数据
                jsonp: "callback",
                jsonpCallback: "successCallback",//回调方法
                success: function (data) {
                    console.log(data);
                }
    
            });
        });
    </script>
    

    相关文章

      网友评论

          本文标题:flask+jsonp跨域前后台交互

          本文链接:https://www.haomeiwen.com/subject/ngqkmhtx.html