我已经获得了以下Python代码:
@restServer.route("/sendData", methods=['POST'])
def client():
ID = request.form.get('ID')
name = request.form.get('name')
postcode = request.form.get('postcode')
dateofbirth = request.form.get('dateofbirth')
balance = request.form.get('balance')
description = request.form.get('description')
insert_stmt = (
"INSERT INTO clients (ID, name, postcode, dateofbirth, balance, description) "
"VALUES (%s, %s, %s, %s, %s, %s)"
)
data = (ID, name, postcode, dateofbirth, balance, description)
cursor.execute(insert_stmt, data)
conn.commit()
print("Did we do it?")
return jsonify(data)
我还获得了以下HTML代码:
<form method="POST">
<p>ID of your Avenger:</p> <input type="number" id="ID" required>
<p>Name of your Avenger:</p> <input type="text" id="name" required>
<p>Post Code of your Avenger:</p> <input type="text" id="postcode" required>
<p>Date of Birth of your Avenger:</p> <input type="date" id="dateofbirth" required>
<p>Bank balance of your Avenger:</p> <input type="number" id="balance" required>
<p>Description of your Avenger:</p> <input type="text" id="description" required>
<button class="button1" type="button" id="hashButton" onclick="nameInput()">Submit</button></form>
最后是以下Javascript代码:
function nameInput() {
var words = document.getElementById("ID", "name", "postcode", "dateofbirth", "balance", "description" ).value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
var json = JSON.parse(this.responseText);
document.getElementById("nameInputReturn").innerHTML =
json.name;
}
}
xhttp.open("POST", "http://127.0.0.1:5000/sendData", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
xhttp.send(words);
}
我试图制作它,以便您可以将数据输入到表单中,然后将数据上传到数据库中。我已经弄清楚如何输入我在代码中指定的数据,只需更改内部的部分变量即可
data = (ID, name, postcode, dateofbirth, balance, description)
行。目前,单击了提交按钮,但数据库只添加了一行,每行都有NULL。
我对Flask很新,所以感谢任何帮助!
答案 0 :(得分:2)
你的前端有点乱。看起来你正试图通过JS发送POST
请求,当你的HTML可以做得更好更容易。
尝试从提交按钮中删除侦听器,并将您的初始表单标记更改为<form method="POST" action="http://127.0.0.1:5000/updateName">
。
您还应将所有id
属性更改为name
。这是因为id
属性未发送到服务器。但是,name属性被发送并用于从服务器访问表单的信息。
这应该是一个很好的起点:
<form method="POST" action="http://127.0.0.1:5000/updateName">
<p>ID of your Avenger:</p> <input type="number" name="ID" required>
<p>Name of your Avenger:</p> <input type="text" name="name" required>
<p>Post Code of your Avenger:</p> <input type="text" name="postcode" required>
<p>Date of Birth of your Avenger:</p> <input type="date" name="dateofbirth" required>
<p>Bank balance of your Avenger:</p> <input type="number" name="balance" required>
<p>Description of your Avenger:</p> <input type="text" name="description" required>
<button class="button1" type="button" id="hashButton">Submit</button>
</form>