跨域获取

1.原生JS实现
课堂练习：
点击显示按钮显示从后端发过来的dict字典，将字典中的值显示在页面上
html:代码：

显示

航班编号：

始发城市：

终到城市：

出发时间：

服务器端代码： #跨域2 @app.route('/08-flight') def crossdomain2(): #接收前端传递过来的callback的参数 #callback参数值是指定前端执行处理数据的函数名 cb=request.args.get('callback') dic={ 'flighNO':'MU763', 'start':'BeiJing', 'end':'Saipan', 'time':'16:55', } print('1111') #将dic转换成json串,返回到前端 return cb+"("+json.dumps(dic)+")" 2.jquery去实现的两种方式： jquery的跨域 jsonp - json with padding(内边距，包围) 指：要执行的前端函数， 正如----> process_msg({xxx:xxx})

http://127.0.0.1:5000/08-flight?callback=process_flight
将原生代码中的冗长复杂的script等形式改为如下代码：
$.ajax({
  url:'xxx',
  type:'get',
  dataType:'jsonp',		返回回来的是一个要执行的前端函数
  jsonp:'callback' //定义了callback参数名， 指传递到后端参数的名称叫什么,jsonp不写默认参数名是callback
  jsonpCallback:'process_flight'//定义了响应回来的处理函数名称
});

代码：这种方式还需要定义show处理函数
function btnShow() {
$.ajax({
url:‘http://127.0.0.1:5000/08-flight’,
type:‘get’,
dataType:‘jsonp’,
jsonp:‘callback’,
jsonpCallback:‘show’
})
}
jquery中通过ajax实现最简单的跨域：
最最最简易版：
$.ajax({
url:‘xxx’,
type:‘get’,
dataType:‘jsonp’,
success:function(data){
处理响应回来的数据
}
})
代码：
服务端
@app.route(’/08-flight’)
def crossdomain2():
#接收前端传递过来的callback的参数
#callback参数值是指定前端执行处理数据的函数名
cb=request.args.get(‘callback’)
dic={
‘flighNO’:‘MU763’,
‘start’:‘BeiJing’,
‘end’:‘Saipan’,
‘time’:‘16:55’,
}
print(‘1111’)
#将dic转换成json串,返回到前端
return cb+"("+json.dumps(dic)+")"
html端：
function btnShow() {
$.ajax({
url:‘http://127.0.0.1:5000/08-flight’,
type:‘get’,
dataType:‘jsonp’,
success:function (msg) {
alert(msg.flighNO)
$("#flighNo").html(msg.flighNO);
$("#start").html(msg.start);
$("#end").html(msg.end);
$("#time").html(msg.time);
},
});
}
显示

航班编号：

始发城市：

终到城市：

出发时间：