跨域的demo
<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>
#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)