在 flask json 中接收轉換后的表單數據
[英]receive in flask json converted and form data
問題描述
我在 flask 中有一個 API。目標是接收轉換后的 csv 文件（javascript 中的函數）和 flask 中的表單數據。 表單數據是元數據，csv 文件轉換為 json 是數據。 我只得到表單數據，我沒有得到 json 文件。
我的 json 從 csv 文件轉換而來，它存儲在變量結果中，表單數據存儲在 formdata 中。 我將兩個變量分開發送。 我正在接收我在 HTML 中插入的所有數據。function 產生的 JSON 將 csv 文件轉換為 json 我沒有進入 flask 端。
HTML
<!DOCTYPE html>
<html lang="PT">
<head>
<meta charset="utf-8">
<title>Register</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/static/sendform.js"> </script>
<link href="{{url_for('static', filename='css/mainpage.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="upper_left"></div>
<div id="upper_right"></div>
<div id="lower_left"></div>
<div id="lower_right"></div>
<div class="container">
<div class="title">Metadados - Dados relacionados com o Atleta</div>
<form action="index" method="post">
<div class="user-details">
<div class="input-box">
<span class="details">Nome Completo</span>
<input type="text" name="fullName" placeholder="Introduza o nome completo do atleta">
</div>
<div class="input-box">
<span class="details">Data de Nascimento</span>
<input type="text" name="birthdate" placeholder="Introduza a data de nascimento do atleta">
</div>
<div class="input-box">
<span class="details">Altura</span>
<input type="text" name="height" placeholder="Introduza a altura do atleta em cm">
</div>
<div class="input-box">
<span class="details">Peso</span>
<input type="text" name="weight" placeholder="Introduza o peso do atleta em kg">
</div>
<div class="input-box">
<span class="details">Tamanho da Piscina</span>
<input type="text" name="poolsize" placeholder="Introduza o tamanho da piscina">
</div>
<div class="input-box">
<span class="details">Modalidade</span>
<input type="text" name="modality" placeholder="Introduza a modalidade">
</div>
<div class="input-box">
<span class="details">Estilo(s) de Natação</span>
<input type="text" name="swimStyle" placeholder="Introduza o estilo(s) de natação">
</div>
<div class="input-box">
<span class="details">Género</span>
<select name="gender">
<option value ="gender">Selecionar genéro</option>
<option value ="masculino">Masculino</option>
<option value ="feminino">Feminino</option>
</select>
<div class="input-box">
<span class="details">Escalão Etário</span>
<select name="gender-title">
<option value ="gender-title">Select gender group</option>
<option value ="Escola_de_natacao">ESCOLA DE NATACAO</option>
<option value ="grupos_de_natacao_desportiva">GRUPOS DE FORMACAO DESPORTIVA</option>
<option value ="cadeteA">CADETES A</option>
<option value ="cadeteB">CADETES B</option>
<option value ="infatilB">INFANTIS B</option>
<option value ="infatilA">INFANTIS A</option>
<option value ="juvenilB">JUVENIS B</option>
<option value ="juvenilA">JUVENIS A</option>
<option value ="junior">JUNIORES</option>
<option value ="senior">SENIORES</option>
</select>
</div>
<div class="title">Metadados Envio de dados</div>
<div class="input-box">
<span class="details">Utilizador Id</span>
<input type="text" name="userId" placeholder="Introduza o seu Id">
</div>
<div class="input-box">
<span class="details">Token</span>
<input type="text" name="token" placeholder="Introduza o token">
</div>
<p>Selecionar o ficheiro localmente:</p>
<input name="myFile" type="file" accept=".txt,.xlsx, .xls, .csv" >
<div class="button">
<input type="submit" id="btn-post" value="Enviar dados" onclick="do_ajax();">
<div class="input-box"></dix>
</div>
</div>
</form>
</div>
</body>
</html>
Javascript
function do_ajax() {
var input = document.querySelector('input').files;
if(!input.length){
alert("No file selected");
return;
}
var file = input[0];
var reader = new FileReader();
reader.onload = (function() {
return function(e) {
var fileData = e.target.result.trim().split('\n').map(row => row.split(','));
var HEADERS = ["time", "yaw", "pitch", "roll", "heading", "ax", "ay", "az", "gx", "gy", "gz", "mx", "my", "mz"];
const RESULT = {};
// Assign every heading to the result.
for (const HEADING of HEADERS) RESULT[HEADING] = [];
fileData.map(row =>
// Each row → each column, number of columns === number of headers
row.map((column, i) =>
RESULT[HEADERS[i]]
.push(Number(column))
));
console.log(RESULT);
};
})(file);
reader.readAsText(file);;
let fullName = document.getElementById('fullName').value;
let birthdate = document.getElementById('birthdate').value;
let height = document.getElementById('height').value;
let weight = document.getElementById('weight').value;
let poolsize = document.getElementById('poolsize').value;
let modality = document.getElementById('modality').value;
let swimStyle = document.getElementById('swimStyle').value;
var tel = document.getElementById('gender').value;
var sel = document.getElementById('gender-title').value;
console.log(sel.value);
const formdata = new FormData();
formdata.append("fullName", fullName)
formdata.append("birthdate",birthdate)
formdata.append("weight",weight)
formdata.append("height",height)
formdata.append("poolsize",poolsize)
formdata.append("modality",modality)
formdata.append("swimStyle",swimStyle)
formdata.append("gender",tel)
formdata.append("gender-title",sel)
var xhr = new XMLHttpRequest();
xhr.open('POST', '/index', true);
xhr.send(formdata);
xhr.send(JSON.stringify(RESULT));
};
FLASK
from flask import Flask, request, render_template
import pymongo
import json
app = Flask(__name__)
app.debug = True
@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
def index():
if request.method == "POST":
name = request.form["fullName"]
birthdate =request.form["birthdate"]
poolsize =request.form["poolsize"]
height =request.form["height"]
weight =request.form["weight"]
modality =request.form["modality"]
swimStyle =request.form["swimStyle"]
gender = request.form["gender"]
gender_title = request.form["gender-title"]
output = request.get_json()
print(output)
print (name,birthdate,poolsize,height,weight,modality,swimStyle)
alldata = { "sessionData": output,
"metadata":{ "birthdate": birthdate, "Name": name,
"Weight": height,"Pool_size":poolsize,
"Weight":weight,"Gender":gender,"Gender_title":gender_title,
"modality":modality, "swimStyle": swimStyle}}
return alldata,200
else:
return render_template('index.html')
if __name__ == "__main__":
app.run()
1 個解決方案
解決方案1
1 已采納 2022-02-10 22:36:07
數據傳輸只能符合一種格式。 此格式是表單的編碼或對應於 JSON 格式。
您仍然可以在一個請求中發送數據。 您可以將 JSON 格式的數據作為字段添加到表單中，或者將表單數據轉換為 JSON 結構。
對於第一個變體，需要在服務器端手動讀取 JSON 數據。 您可以為此使用 python json庫。 對於后者，框架完成了這項工作。
第三種選擇是在表單內傳輸文件並在服務器端簡單地讀取它。
無論您選擇哪個選項，都不要忘記驗證輸入。
在下面的示例中，所有表單數據都轉換為 JSON 並發送到服務器。 為了清楚起見，我稍微縮短了代碼。
將 JSON 格式數據添加到表單數據的版本應該是不言自明的。
我認為最好的解決方案是讀取文件服務器端。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Read CSV to JSON</title>
</head>
<body>
<form name="my-form" method="post" enctype="" enctype="multipart/form-data">
<input type="text" name="name" />
<!-- ... -->
<input type="file" name="csv" allow="text/csv" />
<input type="submit" />
</form>
<script type="text/javascript">
((uri) => {
function readCSV(file, delim=',') {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onerror = reject;
reader.onload = (evt) => {
resolve(evt.target.result.split(/\r\n|\n/).map(line => line.split(delim)));
};
reader.readAsText(file);
});
}
function serialize(formData) {
const data = {};
for (const [k, v] of formData) data[k] = v;
return data;
}
// Register a listener for submit events and suppress the default behavior of the form.
const form = document.querySelector('form[name="my-form"]');
form.addEventListener('submit', async evt => {
evt.preventDefault();
if(!evt.target.csv.files.length) {
alert('No file selected.');
return;
}
const file = evt.target.csv.files[0];
const formData = new FormData(evt.target);
formData.delete('csv');
// Conversion of the form data into an object.
const data = serialize(formData);
// Reading and converting the file into a list of objects.
// Adding the list to the previous object.
data['csv'] = await readCSV(file, ',')
.then(csv => {
const head = ['time', 'yaw', 'pitch', 'roll', 'heading', 'ax',
'ay', 'az', 'gx', 'gy', 'gz', 'mx', 'my', 'mz'];
return csv.map(row => {
let r = {};
row.forEach((col, i) => r[head[i]] = Number(col));
return r;
});
});
// Sending the JSON data to the server.
fetch(uri, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).then(resp => resp.json())
.then(data => console.log(data));
});
})({{ url_for('.data') | tojson }});
</script>
</body>
</html>
from flask import Flask
from flask import (
jsonify,
render_template,
request,
)
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/data', methods=['POST'])
def data():
data = request.json
print(data)
return jsonify(success=True)
從 python object 使用 Z319C3206A7F10C17C3B9116D4A95764 打印 JSON 字符串
[英]print JSON string converted from python object using flask
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.