浠涔堟槸璺ㄥ煙
璺ㄥ煙锛氭寚鐨勬槸娴忚鍣ㄤ笉鑳芥墽琛屽叾浠栫綉绔欑殑鑴氭湰銆傚畠鏄敱娴忚鍣ㄧ殑鍚屾簮绛栫暐閫犳垚鐨勶紝鏄祻瑙堝櫒瀵筳avascript鏂藉姞鐨勫畨鍏ㄩ檺鍒躲
渚嬪锛歛椤甸潰鎯宠幏鍙朾椤甸潰璧勬簮锛屽鏋渁銆乥椤甸潰鐨勫崗璁佸煙鍚嶃佺鍙ｃ佸瓙鍩熷悕涓嶅悓锛屾墍杩涜鐨勮闂鍔ㄩ兘鏄法鍩熺殑锛岃屾祻瑙堝櫒涓轰簡瀹夊叏闂涓鑸兘闄愬埗浜嗚法鍩熻闂紝涔熷氨鏄笉鍏佽璺ㄥ煙璇锋眰璧勬簮銆傛敞鎰忥細璺ㄥ煙闄愬埗璁块棶锛屽叾瀹炴槸娴忚鍣ㄧ殑闄愬埗銆傜悊瑙ｈ繖涓鐐瑰緢閲嶈锛侊紒锛
鍚屾簮绛栫暐锛氭槸鎸囧崗璁紝鍩熷悕锛岀鍙ｉ兘瑕佺浉鍚岋紝鍏朵腑鏈変竴涓笉鍚岄兘浼氫骇鐢熻法鍩
Ajax鐩存帴璇锋眰鏅氭枃浠跺瓨鍦ㄨ法鍩熸棤鏉冮檺璁块棶鐨勯棶棰橈紝鐢浣犳槸闈欐侀〉闈€佸姩鎬佺綉椤点亀eb鏈嶅姟銆乄CF锛屽彧瑕佹槸璺ㄥ煙璇锋眰锛屼竴寰嬩笉鍑嗭紱
鑰屽湪Web椤甸潰涓婅皟鐢╦s鏂囦欢鏃跺垯涓嶅彈鏄惁璺ㄥ煙鐨勫奖鍝嶏紙涓嶄粎濡傛锛屽嚒鏄嫢鏈"src"杩欎釜灞炴х殑鏍囩閮芥嫢鏈夎法鍩熺殑鑳藉姏锛屾瘮濡<script>銆<img>銆<iframe>銆傝法鍩熻闂暟鎹氨鍙湁涓绉嶅彲鑳斤紝閭ｅ氨鏄湪杩滅▼鏈嶅姟鍣ㄤ笂璁炬硶鎶婃暟鎹杩沯s鏍煎紡鐨勬枃浠堕噷锛屼緵瀹㈡埛绔皟鐢ㄥ拰杩涗竴姝ュ鐞嗐
web瀹㈡埛绔氳繃涓庤皟鐢ㄨ剼鏈竴妯′竴鏍风殑鏂瑰紡锛屾潵璋冪敤璺ㄥ煙鏈嶅姟鍣ㄤ笂鍔ㄦ佺敓鎴愮殑js鏍煎紡鏂囦欢锛堜竴鑸互JSON涓哄悗缂锛
涓轰簡渚夸簬瀹㈡埛绔娇鐢ㄦ暟鎹紝閫愭笎褰㈡垚浜嗕竴绉嶉潪姝ｅ紡浼犺緭鍗忚锛屼汉浠妸瀹冪О浣淛SONP锛岃鍗忚鐨勪竴涓鐐瑰氨鏄厑璁哥敤鎴蜂紶閫掍竴涓猚allback鍙傛暟缁欐湇鍔＄锛岀劧鍚庢湇鍔＄杩斿洖鏁版嵁鏃朵細灏嗚繖涓猚allback鍙傛暟浣滀负鍑芥暟鍚嶆潵鍖呰９浣廕SON鏁版嵁锛岃繖鏍峰鎴风灏卞彲浠ラ殢鎰忓畾鍒惰嚜宸辩殑鍑芥暟鏉ヨ嚜鍔ㄥ鐞嗚繑鍥炴暟鎹簡銆
jsonp 鐨勬牳蹇冨垯鏄姩鎬佹坊鍔 <script> 鏍囩鏉ヨ皟鐢ㄦ湇鍔″櫒鎻愪緵鐨 js 鑴氭湰锛宩sonp鏄竴绉嶆柟寮忔垨鑰呰闈炲己鍒舵у崗璁紝濡傚悓ajax涓鏍凤紝瀹冧篃涓嶄竴瀹氶潪瑕佺敤json鏍煎紡鏉ヤ紶閫掓暟鎹紝濡傛灉浣犳効鎰忥紝瀛楃涓查兘琛岋紝鍙笉杩囪繖鏍蜂笉鍒╀簬鐢╦sonp鎻愪緵鍏紑鏈嶅姟
鍓嶇浠ｇ爜锛
<script>
function callback_12server(response) {
console.log('process 12-server msg');
for(var i=0; i<response.length; i++){
console.log("濮撳悕锛"+response[i].uname);
console.log("閭锛"+response[i].uemail);
}
}
$(function () {
$("#btnCross").click(function () {
// 璁块棶http://127.0.0.1:5000/12-cross
// 璇锋眰http://0.0.0.0:5000/12-server
var script = document.createElement("script"); // 鍒涘缓script鍏冪礌锛堟爣绛撅級
script.type = "text/javascript";
script.src = "http://0.0.0.0:5000/12-server?callback=callback_12server";
$("body").append(script);
});
});
</script>
鍚庣浠ｇ爜锛
# python锛宖lask妗嗘灦
@app.route('/12-server')
def server12():
# 鎺ユ敹鍓嶇浼犺繃鏉ョ殑callback()鍥炶皟鍑芥暟
callback = request.args.get('callback')
# 浠庢暟鎹簱涓煡璇㈡暟鎹
users = User.query.all()
list = []
# 閬嶅巻users鏁版嵁锛屾坊鍔犲埌list鍒楄〃涓
for u in users:
list.append(u.to_dict()) # to_dict() 鏄皢绫诲睘鎬ц浆鎹㈡垚瀛楀吀绫诲瀷
# 灏嗗垪琛ㄨ浆鎹㈡垚瀛楃涓
# jsonStr鏁版嵁鏍煎紡鏄細 "[{key01:value,key:value},{key:value}]"
jsonStr = json.dumps(list)
return callback+"("+jsonStr+");" # 杩斿洖缁欏墠绔殑鍥炶皟鍑芥暟锛 "callback(jsonStr)"
JSONP
1.姒傚康 JSONP鐨勫悕瀛楁槸json + padding 涓昏鐨勬剰鎬濇槸灏嗘湇鍔″櫒绔彂閫佺殑鏁版嵁濉厖html椤甸潰涓 JSONP鍜孉JAX娌℃湁涓姣涢挶鍏崇郴
2.鍘熺悊 鍦╤tml椤甸潰娣诲姞浜嗕竴涓猻cript鏍囩 閫氳繃src鐨勬爣绛剧殑src璇锋眰涓涓湴鍧 璇锋眰鐨勮繖涓湴鍧杩斿洖鐨勬牸寮忎竴瀹氭槸涓涓嚱鏁板悕 鍑芥暟鍚(JSON鏁版嵁)
3.缂虹偣 src鍙兘鍙戦乬et璇锋眰 涔熷氨鏄JSONP鍙兘澶勭悊get璇锋眰鏂瑰紡 涓嶈兘澶勭悊鍏朵粬
4.浣跨敤 **script鏍囩**寮曞叆鐨勫唴瀹瑰拰**鏂囦欢绫诲瀷娌℃湁鍏崇郴** 鍙鏄紩鍏ョ殑鏂囦欢閮戒細琚綋鎴**JS浠ｇ爜**杩涜澶勭悊 鎵浠 鍥犱负script鐨勬柟寮忎笉浼氫骇鐢熻法鍩 鎵浠ヨ娌℃湁璺ㄥ煙闂
html <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">鐐瑰嚮鎴</button>
<h2>娓叉煋缁撴灉</h2>
<div id="div"></div>
</body>
</html>
<script>
function render(res){
let div = document.getElementById('div');
div.innerHTML = res.name;
}
let btn = document.querySelector('#btn');
btn.onclick = function(){
let script = document.createElement("script");
// script.src = "./demo.txt";
script.src = "http://127.0.0.1:3000/login";
document.body.appendChild(script); }
</script>
浠ヤ笂灏辨槸Python+Jsonp 杞绘澗瀹炵幇璺ㄥ煙鍘熺悊鐨勮缁嗗唴瀹癸紝鏇村淇℃伅璇峰叧娉∣D浜戝叾瀹冪浉鍏虫枃绔狅紒
鍠 娆 69