html5把json傳給flask
更新時(shí)間：2026-05-04 15:55:47
在Web開(kāi)發(fā)中，我們經(jīng)常需要?將數據從前端傳遞到后端進(jìn)行處理，HTML5和Flask是兩種常用的技術(shù)，HTML5用于構建網(wǎng)頁(yè)界面(??ヮ?)?*:???，而Flask是一個(gè)輕量級的Python Web框架，本文將詳細介紹如何使用HTML5將JSON數據傳遞給Flask后端。
（圖片來(lái)源網(wǎng)絡(luò )，侵刪）1、我們需要創(chuàng )建一個(gè)HTML文件，用于展示一個(gè)表單，用戶(hù)可以在其中輸入數據，在這個(gè)例子中，我們將創(chuàng )建一個(gè)簡(jiǎn)單的表單，包含兩個(gè)文本輸入框和一個(gè)提交按鈕，當用戶(hù)填寫(xiě)完表單并點(diǎn)擊提交按??鈕時(shí)，我們將使用JavaScript捕獲表單數據，并將??其轉(zhuan)換為JSON格式。
<!DOCTYPE html><html lang="en"><head> <met(⊙_⊙)a charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>JSON to Flask Example</title> <s???cript src="ht??t??ps://code(′▽?zhuān)?).j??(′?｀)query.co??m/jquery3.6.0.min.js"></script></head>??;<body> <form id=&qu??ot;dataform"> <label for="name">Nam(′ω｀*)e:</label> <input type="text(╯°□°）╯"??; id="name" name??="name"> <br> <label for="email">Email:</label> <input type="text" id="email" name="email"> <br> <bu??tton type="submit">Submit</button> </form> <script> $(document).ready(function() { $('#dataform').on('??submit', function(e) { e.preventDefault(); var data = { 'name': $('#name').val(), 'email': $('#email').val() }; $.ajax({ type: 'POST', url: '/process_data', data: JSON.stringify(data), contentType: 'application/json; charset=utf8', success: functi??on(response) { alert('Data has been processed'); }, error: function(error) { console.log('Error:', error); } }); }); }); </script></body></html>2、接下來(lái)，我們需要創(chuàng )建一個(gè)Flask應用???，確保已經(jīng)安裝了Flask庫，如果沒(méi)有安裝，可以使用以下命令安裝：
pip install flask創(chuàng )建一個(gè)名為app.py的文件，內容如下：
fro??m flask import Flask, request, jsonifyapp = Flask(__name__)@app.route('/process_data', methods=['POST'])def process_data(): data = req(′?｀*)uest.get_json() name = dat??a(′_ゝ`)['name'] emai(°□°)l = data['email'] # 在這??里處理(′ω｀*)數據，例如將其存儲到數據庫等操作 return jsonify({ 'message': 'Data received and processed successfully'}), 200if __name__ == '__main__': app.run(debug=True)3、運行Flask應用，在命令行中，導航到包含app.py的文件夾，然后運行以下(′_｀)命令：
python app.py
4、打開(kāi)瀏覽(′_｀)器，訪(fǎng)問(wèn)http://127.0.0.1:5000/，你將看到之前創(chuàng )建的表單，在表單中輸入數據(?⊿?)，然后點(diǎn)擊提交按鈕，此時(shí)，前端發(fā)送一個(gè)POST請求到/process_data路由，并將JSON數據作為請求體發(fā)送，Flask后端接收到請求后，從請求體中解析出JSON數據，并進(jìn)行相應的處理，在這個(gè)例子中，我們只是簡(jiǎn)單地返回一個(gè)表示成功處理數據的JSON響應。
通過(guò)以上步驟，我們已經(jīng)成功地將HTML5中的JSON數據傳遞給了Flask后端，在實(shí)際項目中，你可以根據需要對數據進(jìn)行處理，例如將其存儲到數據庫、調用其他API等操作，希望這個(gè)示??例對你有所幫助！
