如何将数据从Python FLASK输入到数据库？

Question

I've got the below Python code:

@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)

I've also got the below HTML code:

  <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>

And finally the below Javascript code:

  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);
    }

I'm trying to make it so you can input data into the form and then it will upload that data into the database. I've figured out how to input data that I specify in the code, by simply changing the parts variables inside the data = (ID, name, postcode, dateofbirth, balance, description) line. Currently, the submit button is clicked but the database just adds a line which has NULL for every column.

I'm quite new to Flask, so any help is appreciated!

Answer 1

Your front end is kind of a mess. It seems like you are trying to send the POST request through JS, when your HTML could do it better and easier.

Try removing the listener from your submit button and changing your opening form tag to something like <form method="POST" action="http://127.0.0.1:5000/updateName"> .

You should also change all of your id attributes to name . This is because the id attribute does not get sent to the server. The name attribute, however, is sent and used to access the form's information from the server.

This should be a good place to start:

<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>