來源：巴黎香榭 發(fā)布時間：2018-10-10 16:29:04 閱讀量：1204
jQuery對AJAX的支持
$.ajax()
語法：
$.ajax({請求參數(shù)的json對象});
請求參數(shù)對象的屬性：
URL：字符串 表示異步請求地址
type：字符串 請求方式 get或post
date：傳遞到服務(wù)端的參數(shù) 參數(shù)字符串（"name=dfh&age15"）或json
datetype：響應(yīng)回來的數(shù)據(jù)格式
HTML
xml
text
script
json
jsonp：有關(guān)跨域的響應(yīng)了格式
success：
回調(diào)函數(shù) 響應(yīng)成功后的回調(diào)函數(shù)
error：
回調(diào)函數(shù) 請求或響應(yīng)失敗時的回調(diào)函數(shù)
beforSend：
回調(diào)函數(shù) 發(fā)送AJAX請求之前的回調(diào)函數(shù)
如果return False 則終止請求發(fā)送<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.js"></script></head><body>
<h1>靜態(tài)網(wǎng)頁</h1>
<p>
uname <input type="text" id="uname">
</p>
<button id="btnajax">查詢</button>
<p id="show"></p>
<script>
$(function () {
$("#btnajax").click(function () {
// 使用get請求發(fā)送一個uname參數(shù) 到服務(wù)器
$.ajax({
// 請求地址
url: "/05-server1",
// 請求方式
type: "get",
// 請求參數(shù)
data: "uname=" + $("#uname").val(),
// 響應(yīng)回來的數(shù)據(jù)格式
dataType: 'json',
// 請求和響應(yīng)后的回調(diào)函數(shù)
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協(xié)議中有一個策略 "同源策略"
同源：
多個地址中 相同的協(xié)議 相同的域名 相同的端口
在HTTP中 必須是同源地址中 必須是同源地址才能相互
發(fā)送請求 非同源拒絕請求（<script>和<img>除外）
非同源的網(wǎng)頁相互發(fā)送請求的過程就是跨域
跨域只能接受GET請求 不能接受POST請求
跨域解決方案：
通過<script>標(biāo)記向服務(wù)器發(fā)送請求
由服務(wù)器資源指定前端頁面的那個方法來執(zhí)行響應(yīng)的數(shù)據(jù)
jQuery的跨域：
jsonp json with padding
$.ajax({
url:"xxx",
type: "get",
dataType:'jsonp', //指定跨域訪問
jsonp: "callback", //定義了callback函數(shù)名 以便于callback傳遞過去的函數(shù)名
jsonpCallback:'xxx' //定義了傳遞過去函數(shù)的名字 jsonp的回調(diào)函數(shù)
});<!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標(biāo)記
var body = document.getElementsByTagName("body")[0];
// 動態(tài)創(chuàng)建script標(biāo)記
// 通過script請求響應(yīng)回來的數(shù)據(jù)一律當(dāng)成js腳本來執(zhí)行
var script = document.createElement("script");
// 設(shè)置script的type屬性 可以省略
script.type = "text/javascript";
// 網(wǎng)絡(luò)請求地址
// callback 參數(shù)告訴后端 前端處理響應(yīng)數(shù)據(jù)的函數(shù)名
script.src = "http://127.0.0.1:5000/06-server?callback=show";
// 將標(biāo)記追加到當(dāng)前頁面 也就是向src的地址發(fā)送請求同時接受響應(yīng)數(shù)據(jù)
// 響應(yīng)數(shù)據(jù)直接交給了頁面 頁面將響應(yīng)數(shù)據(jù)當(dāng)成js腳本程序執(zhí)行
body.append(script);
});
});
</script></body></html>@app.route("/06-server")def server_06():
# 接受前端傳遞過來的數(shù)據(jù) 也就是前端自定義的函數(shù)名
fun = request.args.get("callback")
# 響應(yīng)數(shù)據(jù) 被前端當(dāng)成js腳本執(zhí)行
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> 出發(fā) " + 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) + ")"
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
