基於python-flask搭建後臺，HTML+CSS+JS（jQuery）寫前端的web全棧開發（三）——3.2 普通按鈕點選事件與後臺互動
在上一篇文章，我們講解了基於外掛實現的上傳圖片到後臺處理，並將處理後得到的結果圖與原圖在前端顯示。
主要idea是將圖片先在後臺進行快取，我們傳回兩張圖片的途徑，在file的done函式中對<img/>標籤的src屬性進行更新。
但是這樣子存在一個問題，就是後臺“static/temp/left(right)”資料夾裡的圖片會越來越多。
這時候就是那個submit按鈕起作用了！我們先將得到的兩個路徑filepath和pilepath_用‘&’合併在一起，暫時儲存在一個不可見的<input type="text"/>標籤中，當submit被點選時，將兩個途徑傳回後臺，後臺函式接收路徑並對對應路徑的檔案做刪除remove。
<!-- demo.html -->
<body>
……
<input id="temp" type="text" value="Nothing!" style="display: none">
……
</body>// javascript $('#fileupload').fileupload{ ... done.function(e, data){ document.getElementById('temp').value = filepath + "&" + filepath_; } ... }
上一次我們已經定義了額外的submit按鈕，現在我們要使用它。
1. 在後臺即sketch.py中新定義函式delete()
@app.route('/delete', methods=['POST','GET'])
def delete():
# do something
return render_template('demo.html')同樣我們要注意路由的設定，我們假設這一次的互動是在一個隱藏的頁面“http://127.0.0.1:5000/delete/”實現的。
2. 前端“submit”標籤與後端函式繫結
因為我們使用ajax進行資料傳輸，因此可以這樣子做——
$('#submit').on("click", function () { $('#progress .progress-bar').css( 'width', 0 + '%' );// 這裡實現了當我們點選submit按鈕後讓進度條重新歸0 var filepath_ = document.getElementById('temp').value;// 獲取剛剛儲存在temp（text）上的數值 // try to delete the original images var data = { 'path': filepath_.split("&")[0], 'path_': filepath_.split("&")[1] }// 對字串做分割，並通過建立字典data進行分裝 $.ajax({ type: 'GET', url:'{{ url_for("delete") }}',// 這裡就實現了函式與html標籤的繫結！！！ data: data, // 要傳給後臺的資料 dataType: 'json', // 資料格式 success: function(data){ // 當成功返回資料到後臺併成功獲取後臺返回的資料時，採取的動作在success函式中定義，與前面的done是類似的 } }); });
3. 完善後臺delete()函式
@app.route('/delete', methods=['POST','GET'])
def delete():
path = request.args.get('path') # 因為資料是通過鍵值對匹配的，還記得前面data的兩個鍵值對嗎？
path_ = request.args.get('path_') # 通過“鍵”獲取對應的“值”
if os.path.isfile(path): # 先判斷檔案是否存在，若是，才可以有remove的意義
os.remove(path)
if os.path.isfile(path_):
os.remove(path_)
return render_template('demo.html') # 停留在本頁面總結
在本文我們是分享瞭如何實現普通按鈕的click函式實現指定元素的value/text/innerHTML等的往後臺的傳送。
對比上一篇博文，關於uploadfiles的實現，其大體思路還是比較相似的，即
1）定義html標籤
2）重寫該標籤的功能函式，如file的uploadfile函式，button的onclick函式
3）通過定義新的url進行與後端函式的繫結
4）用js或jQuery程式碼獲取並處理前臺的相關資料，用字典進行封裝
5）後臺接收包含資料的字典data，通過“鍵”獲取“值”
結束語
好的，本專題至此也已全部結束
，這邊是上週小編所學到的東西，雖然微不足道，但十分有趣。
最後再一次感謝各位夥伴的支援和不吝賜教！