jQuery对AJAX的支持
$.ajax()
语法：
$.ajax({请求参数的json对象});
请求参数对象的属性：
URL：字符串 表示异步请求地址
type：字符串 请求方式 get或post
date：传递到服务端的参数 参数字符串（"name=dfh&age15"）或json
datetype：响应回来的数据格式
HTML
xml
text
script
json
jsonp：有关跨域的响应了格式
success：
回调函数 响应成功后的回调函数
error：
回调函数 请求或响应失败时的回调函数
beforSend：
回调函数 发送AJAX请求之前的回调函数
如果return False 则终止请求发送
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<h1>静态网页</h1>
<p>
uname <input type="text" id="uname">
</p>
<button id="btnajax">查询</button>
<p id="show"></p>
<script>
$(function () {
$("#btnajax").click(function () {
// 使用get请求发送一个uname参数 到服务器
$.ajax({
// 请求地址
url: "/05-server1",
// 请求方式
type: "get",
// 请求参数
data: "uname=" + $("#uname").val(),
// 响应回来的数据格式
dataType: 'json',
// 请求和响应后的回调函数
success: function (data) {
if (data.id){
// 如果data中有ID属性 说明查询成功
var html = "";
html += "<h3> id:" + data.id + "</h3>";
html += "<h3> uname:" + data.uname + "</h3>";
html += "<h3> upwd:" + data.upwd + "</h3>";
html += "<h3> realname:" + data.realname + "</h3>";
} else {
// 否则查询失败
html += "<h3>" + data.msg + "</h3>";
}
$("#show").html(html)
}
});
});
});
</script>
</body>
</html>@app.route("/05-server1")
def server_05_views():
uname = request.args.get("uname")
u = Users.query.filter_by(uname=uname).first()
if u:
return json.dumps(u.to_dict())
dic = {
"status": "0",
"msg": "not username"
}
return json.dumps(dic)跨域（Cross Domain）
什么是跨域？
HTTP协议中有一个策略 "同源策略"
同源：
多个地址中 相同的协议 相同的域名 相同的端口
在HTTP中 必须是同源地址中 必须是同源地址才能相互
发送请求 非同源拒绝请求（<script>和<img>除外）
非同源的网页相互发送请求的过程就是跨域
跨域只能接受GET请求 不能接受POST请求
跨域解决方案：
通过<script>标记向服务器发送请求
由服务器资源指定前端页面的那个方法来执行响应的数据
jQuery的跨域：
jsonp json with padding
$.ajax({
url:"xxx",
type: "get",
dataType:'jsonp', //指定跨域访问
jsonp: "callback", //定义了callback函数名 以便于callback传递过去的函数名
jsonpCallback:'xxx' //定义了传递过去函数的名字 jsonp的回调函数
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<button id="btn">跨域请求</button>
<div id="show"></div>
<script>
function show(data){
console.log(data);
}
$(function () {
$("#btn").click(function () {
// 无法完成跨域访问
// var url = "http://127.0.0.1:5000/06-server"
// $.get("/06-server", function (data) {
// $("#show").html(data)
// });
// 原生js完成跨域请求
// 获取body标记
var body = document.getElementsByTagName("body")[0];
// 动态创建script标记
// 通过script请求响应回来的数据一律当成js脚本来执行
var script = document.createElement("script");
// 设置script的type属性 可以省略
script.type = "text/javascript";
// 网络请求地址
// callback 参数告诉后端 前端处理响应数据的函数名
script.src = "http://127.0.0.1:5000/06-server?callback=show";
// 将标记追加到当前页面 也就是向src的地址发送请求同时接受响应数据
// 响应数据直接交给了页面 页面将响应数据当成js脚本程序执行
body.append(script);
});
});
</script>
</body>
</html>@app.route("/06-server")
def server_06():
# 接受前端传递过来的数据 也就是前端自定义的函数名
fun = request.args.get("callback")
# 响应数据 被前端当成js脚本执行
return fun + "('server 06')"三种形式的跨域请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<button id="btnShow">显示</button>
<div id="show"></div>
<script>
function flight(data) {
html = "";
html += "<h3> 航班 " + data.flight + "</h3>";
html += "<h3> 出发 " + data.from + "</h3>";
html += "<h3> 到达 " + data.to + "</h3>";
html += "<h3> 时间 " + data.time + "</h3>";
$("#show").html(html);
}
$(function () {
$("#btnShow").click(function () {
// 原生跨域请求
// var body = document.getElementsByTagName("body")[0];
// var script = document.createElement("script");
// script.type = "text/javascript";
// script.src = "http://127.0.0.1:5000/07-server?callback=flight";
// body.append(script);
// jQuery跨域请求 jsonp
// $.ajax({
// url: "http://127.0.0.1:5000/07-server",
// type: "get",
// dataType: "jsonp",
// jsonp: "callback",
// jsonpCallback: "flight"
// });
// jQuery跨域请求 jsonp
$.ajax({
url:'http://127.0.0.1:5000/07-server',
type:'type',
dataType:'jsonp',
success:function (data) {
console.log(data.flight);
console.log(data.from);
console.log(data.to);
console.log(data.time);
}
});
});
});
</script>
</body>
</html>
@app.route("/07-server")
def server_07():
cb = request.args.get("callback")
dic = {
"flight": "MU763",
"from": "beijing",
"to": "saipan",
"time": "16:55"
}
return cb + "(" + json.dumps(dic) + ")"