yeyuguo
7/14/2017 - 9:04 AM

跨域的demo

跨域的demo

-.html
content_copyfile_download
<html>
<head></head>
<script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js'></script>
<style>
    .a{
        float: left;
        width: 500px;
    }
    .b{
        margin:10px 0 0 50px;
        border:1px solid #000;
        height: 300px;
        /*float: left;*/
    }
</style>
<body>
    <div class="a">
        <div class="b"></div>
        <button>点击</button>
    </div>
    <script>
    // http://web.jobbole.com/87885/      //跨域原文章  
    // jsonp 简而言之：加载远程的脚本到本地中执行；具体是 服务器端返回函数包裹一个json数据，客户端在非同源策略下，从服务器上下载脚本来本地执行；
    $(document).ready(function(){
        $('button').on('click',function(){
            $.ajax({
                url:'http://127.0.0.1:9999/test',
                dataType:'jsonp',
                jsonp:'hehe',
                // jsonpCallback : "self_define_name", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名(jQuery_xxxx)，也可以写"?"，jQuery会自动为你处理数据
                success:function(data){
                    console.log({data})
                    $('.b').text(data.msg)
                }
                // error:function(err){
                //     console.log({error:err})
                // }
            })
        })
    })
    </script>
</body>
</html>
-.py
content_copyfile_download
#coding:utf-8
from flask import Flask,jsonify,request

app = Flask(__name__)




@app.route('/test')
def test():
    print 'start....'
    callback = request.values.get('hehe')  # 每次刷新页面获取到的 callback 是不同的;
    data = {"msg":"jsonp success"}
    print callback
    jsonp = '%s(%s)'%(callback,data)
    return jsonp


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