Problem: I am attempting to send data from a Form in the React Frontend, and simply print out the result from the backend, though I keep getting an empty string.
Attempt:
Here is the axios call:
formLogin = (e) => {
e.preventDefault();
axios
.post('http://localhost:5000/post', {
name: document.getElementById("name").value,
})
.then((res) => {
console.log(res.data)
});
}
Here is the React form:
<div className="use
rs-information">
<form onSubmit={this.formLogin} className="patient-form" id="patient-form" name="patient-form" method='POST' action='http://localhost:5000/post' >
<input type="text" name="name" id="name" />
<label>
Address:
<input name="Address" id="users-address" />
</label>
<label>
City:
<input name="City" id="users-city" />
</label>
<label>
State:
<input name="State" id="users-state" />
</label>
<label >
Zip:
<input name="Zip" id="users-zip" />
</label>
<input type='submit' value='Submit'/>
</form>
</div>
Here is the Flask Backend:
@app.route('/post',methods=['POST'])
def testPost():
name = request.form.get("name","")
print(name)
return jsonify(name=name)
Does it have something to do with how I am printing out the response in the frontend? How would I check if the axios call is succeeding? As you can see I am grabbing on of the form inputs by Id and sending that data to the backend with an axios call. Can I have some guidance as to how I would go about testing this? I am new to react and Flask.
CodePudding user response:
The snippet:
axios
.post('http://localhost:5000/post', {
name: document.getElementById("name").value,
})
.then((res) => {
console.log(res.data)
});
}
POSTs the object as JSON, not form. Therefore, you should use:
@app.route('/post',methods=['POST'])
def testPost():
# name = request.form.get("name","") # remove this line
name = request.json["name"] # add this line
print(name)
CodePudding user response:
Here is the changes. Refer to print logic and read json string
@app.route('/post',methods=['POST'])
def testPost():
content = request.json
print content['name']
return jsonify({"name":name})