原生JS實(shí)現(xiàn)Ajax跨域請(qǐng)求flask響應(yīng)內(nèi)容
更新時(shí)間：2017年10月24日 09:22:25 作者：嵐漾憶雨
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)Ajax跨域請(qǐng)求flask響應(yīng)內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Ajax方法好，網(wǎng)站感覺跟高大上，但由于Js的局限，跨域Ajax無法實(shí)現(xiàn)，這里，講一下解決辦法，前提是需要能夠自己可以控制flask端的響應(yīng)。
主要技術(shù)：
修改服務(wù)器相應(yīng)的相應(yīng)頭，使其可以相應(yīng)任意域名。and設(shè)置響應(yīng)頭，使其能夠相應(yīng)POST方法。
實(shí)現(xiàn)代碼：
這里先放flask代碼：
from flask import make_response
@app.route('/test',methods=['get','post'])
def Test():
if request.method=='GET':
rst = make_response('aaa')
rst.headers['Access-Control-Allow-Origin'] = '*' #任意域名
return rst
else:
rst = make_response('bbb')
rst.headers['Access-Control-Allow-Origin'] = '*'
rst.headers['Access-Control-Allow-Methods'] = 'POST' #響應(yīng)POST
return rst
html測試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="ss">test get</span>
<button onclick="getAjax()">click</button>
<p id="time">test post</p>
<input type="submit" value="click" onclick="getPostAjax()">
<script>
function getPostAjax() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function () {
if(xmlhttp.readyState=4 && xmlhttp.status ==200 ) {
document.getElementById("time").innerText = xmlhttp.responseText;
}
}
xmlhttp.open("POST","http://localhost:5000/test",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
#這句話可以發(fā)送post數(shù)據(jù)，沒有此句post的內(nèi)容無法傳遞
xmlhttp.send();
}
function getAjax() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function () {
if(xmlhttp.readyState==4 && xmlhttp.status == 200){
document.getElementById("ss").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://localhost:5000/test",true);
xmlhttp.send();
}
</script>
</body>
</html>
無法控制響應(yīng)頭
對(duì)于這種情況，get請(qǐng)求可以使用jquery完成，post，無能為力。目前前后端均我一人編寫，暫不考慮慮此情況。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
uni-app中使用手機(jī)號(hào)一鍵登錄的詳細(xì)圖文教程
最近剛接觸了uni-app,用于開發(fā)微信小程序,設(shè)計(jì)到了微信授權(quán)登錄,下面這篇文章主要給大家介紹了關(guān)于uni-app中使用手機(jī)號(hào)一鍵登錄的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單的拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript面向?qū)ο笾钊肓私釫S6的class
class盡管只算是一個(gè)語法糖,但它卻是語言規(guī)范方面的一大成就,也對(duì)之前的繼承進(jìn)行了一定的增強(qiáng),下面這篇文章主要給大家介紹了關(guān)于JavaScript面向?qū)ο笾钊肓私釫S6的class的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了javascript判斷chrome瀏覽器的方法，通過userAgent判斷檢測一下userAgent返回的字符串里面是否包含“Chrome”,需要的朋友可以參考下2014-03-03
window.event快達(dá)到全瀏覽器支持了，以后使用就方便了
在Tangram群里討論到<a href="#" onclick="baidu.event.preventDefault(event);">的寫法時(shí)，以為標(biāo)準(zhǔn)瀏覽器只能用arguments[0]來獲取到event，結(jié)果nodiseal同學(xué)說已經(jīng)可以這么用了，于是做了以下測試2011-11-11
這篇文章主要為大家詳細(xì)介紹了使用js實(shí)現(xiàn)復(fù)制功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了Js和VUE實(shí)現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
分別用marquee和div+js實(shí)現(xiàn)首尾相連循環(huán)滾動(dòng)效果，僅3行代碼
這是本人2007年進(jìn)行的一項(xiàng)研究，當(dāng)時(shí)網(wǎng)絡(luò)上沒有什么既精簡又實(shí)用的循環(huán)滾動(dòng)代碼，所以就自己琢磨了段時(shí)間，最終找到這個(gè)辦法2011-09-09
這篇文章主要介紹了javascript禁止超鏈接跳轉(zhuǎn)的方法,結(jié)合實(shí)例分析了JavaScript事件機(jī)制與鼠標(biāo)事件的響應(yīng)操作技巧,需要的朋友可以參考下2016-02-02
js實(shí)現(xiàn)帶圓角的多級(jí)下拉菜單效果
這篇文章主要介紹了js實(shí)現(xiàn)帶圓角的多級(jí)下拉菜單效果,通過調(diào)用封裝的js庫ocscript.js實(shí)現(xiàn)圓角下拉菜單功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08