溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Python Flask前后端Ajax交互的方法示例

發(fā)布時(shí)間：2020-09-06 13:07:19 來源：腳本之家 閱讀：429 作者：夏夜星語 欄目：開發(fā)技術(shù)

之前總結(jié)過flask里的基礎(chǔ)知識(shí)，現(xiàn)在來總結(jié)下flask里的前后端數(shù)據(jù)交互的知識(shí)，這里用的是Ajax

一、 post方法

1、post方法的位置：在前端HTML里，綁定在一個(gè)按鈕的點(diǎn)擊函數(shù)里，或者一個(gè)鼠標(biāo)輸入框點(diǎn)擊離開事件。

（1）數(shù)據(jù)附在URL里(請(qǐng)求路徑)，發(fā)送到后端。

/*前端HTML<script>里：*/
$.post("/js_post/"+ip, data_to_backend, function(data){alert("success "+data)} );

其中ip，data_to_backend是在此代碼前定義好的；data_to_backend一般是一個(gè)json數(shù)據(jù)(data_to_backend={'ip':$(this).parent().prev().text()})，而data是來自后端的返回?cái)?shù)據(jù)。

#后端py文件(路由啟動(dòng)前面的html的py文件)里：添加一個(gè)路由處理前端post請(qǐng)求
@app.route("/js_post/<ip>", methods=['GET', 'POST'])
def js_post(ip):
   print ip
   return ip +" - ip"

點(diǎn)擊按鈕后的效果：

Python Flask前后端Ajax交互的方法示例

前端定義彈窗數(shù)據(jù)

Python Flask前后端Ajax交互的方法示例

ip在URL里

（2）數(shù)據(jù)單獨(dú)發(fā)送給后端

var ip = $(this).parent().prev().prev().prev().prev().text();
data_tmp = {'ip':ip, 'text':"success for ajax"};  // data to send to server.
$.post('/js_call', data_tmp, function(data){alert(data)});

后端處理程序：

@app.route('/js_call', methods=['GET', 'POST'])
def js_call():  
   print request.values['ip']  
   print request.values['text']  
   # to send the command by ssh : os.system("ssh user@host \' restart(command) \' ")  
   return 'ok!!!!'

Python Flask前后端Ajax交互的方法示例

post獨(dú)立數(shù)據(jù)發(fā)送

二、get方法(同樣可以發(fā)數(shù)據(jù))

$.get('/js_get', {'method':'GET', 'text':"from-html"}, function(data){alert(data)})

后端路由接收處理：

@app.route('/js_get', methods=['GET'])
def js_get():
  print "method: "+request.values['method']+" --- text: "+request.values['text']
  return "get success!"

Python Flask前后端Ajax交互的方法示例

get成功

Python Flask前后端Ajax交互的方法示例

數(shù)據(jù)接收成功

注意的是：其中后端py文件的類似request.values['method']的獲取數(shù)據(jù)的request是一個(gè)Python flask的模塊，需要導(dǎo)入。

總結(jié)：

  • 在flask框架里，Ajax請(qǐng)求對(duì)于后端可以很容易實(shí)現(xiàn)，只需在后端Python代碼中對(duì)ajax路徑作出處理即可。
  • Ajax的post, get方法均可以向后臺(tái)發(fā)送數(shù)據(jù)，只是一般用post發(fā)數(shù)據(jù)(做出改變)，get請(qǐng)求數(shù)據(jù)(不改變)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手