資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究Flask 表單提交無需頁面重新整理
線上應用程式越來越普遍，現在已成為我們日常生活不可或缺的一部分。表單提交是線上應用程式的重要組成部分之一。在網頁上填寫表單的標準流程是點選提交按鈕，該按鈕將資訊傳遞給伺服器進行處理，然而，使用者可能會覺得這種方式緩慢且繁瑣。本文將探討如何在 Flask 中快速有效地提交表單，而無需重新載入頁面，從而改善使用者體驗。
安裝和語法
在深入探討如何在 Flask 中實現表單提交無需頁面重新整理的細節之前，讓我們先了解一下建立基本 Flask 應用程式的語法。
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'Hello, World!'
if __name__ == '__main__':
app.run(debug=True)
這將建立一個基本的 Flask 應用程式，它只有一個路由，返回“Hello, World！”作為響應。要執行該應用程式，只需執行指令碼並在 Web 瀏覽器中導航到 https://:5000/。
演算法
在 HTML 中建立一個帶有適當輸入欄位和提交按鈕的表單。
使用 jQuery 處理表單提交事件並阻止預設的表單提交行為。
使用 jQuery 向 Flask 伺服器傳送 AJAX 請求，並附帶表單資料。
使用 Flask 處理表單資料並返回響應。
使用 jQuery 處理響應並相應地更新頁面。
示例
首先建立一個新的 Flask 專案，然後啟動終端為專案建立一個新目錄。導航到該目錄幷包含一個名為 app.py 的新 Python 檔案。
mkdir flask-form cd flask-form touch app.py
app.py
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route('/submit', methods=['POST'])
def submit():
name = request.form['name']
email = request.form['email']
message = request.form['message']
return 'Form submitted!'
if __name__ == '__main__':
app.run(debug=True)
index.html
<!DOCTYPE html>
<html>
<head>
<title>Flask Form Submission without Page Reload</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('form').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: '/submit',
data: $('form').serialize(),
success: function() {
$('#name').val('');
$('#email').val('');
$('#message').val('');
alert('Form submitted!');
}
});
});
});
</script>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>
輸出
應用場景
建立使用者體驗：Flask 使開發人員能夠構建更像原生桌面或移動應用程式的 Web 應用程式，其中使用者輸入可以即時處理，而不會出現任何延遲或滯後，這可以透過啟用表單提交而無需頁面重新載入來實現，從而減少伺服器負載。
傳統的表單提交需要頁面重新載入，這可能會佔用伺服器資源並影響使用者體驗。透過使用 Flask 提交表單而無需重新載入頁面，可以減少客戶端和伺服器之間需要傳輸的資料量，從而構建更輕量級且高效的應用程式。
Flask 的表單提交功能使即時更新變得更加容易，開發人員可以構建能夠即時更改的應用程式，而無需頁面重新整理。這對於使用者希望儘快檢視最新資訊的應用程式（例如聊天室或社交媒體資訊流）非常有用。
結論
Flask 提交表單無需重新載入頁面的能力可以極大地增強 Web 應用程式的使用者體驗。透過使開發人員能夠構建流暢且無縫的使用者體驗、減少伺服器負載並允許即時更改，此功能在各種不同行業和用例中具有廣泛的應用。由於其簡單性和多功能性，Flask 對於任何希望開發高質量、現代 Web 應用程式的人來說都是一個絕佳的選擇。
3K+ 閱讀量
