Which HTTP Method to Use with Forms? - reactjs

Question

My web app information:
Frontend: React.js
Backend: Flask
Goal: User enters in zip codes and the backend returns the zip code coordinates and distance on the web page
Problem: I was initially under the impression that you only use POST requests when inserting into a database, so I was defining my API endpoints as GET methods. However, since I am under the assumption that it is best to not pass body parameters for GET methods, my current solution is to have it as a POST request. Is this the best practice? Or is there a better way to do it?
Frontend Code
const handleSubmit = e => {
const formData = { "origin": originInput, "destination": destinationInput
}
e.preventDefault();
checkError();
fetch('/path', {
credentials: 'include',
method: 'POST',
body: JSON.stringify(formData),
headers: { 'content-type': 'application/json' }
}).then(res => console.log(res))
.catch(err => console.log(err));
};
return (
<div className="card">
<form onSubmit={handleSubmit}>
<section>
<label htmlFor="origin">Start Zip</label>
<input
type="text"
name="origin"
id="origin"
onChange={e => handleChange(e, updateOriginInput)}
/>
</section>
<section>
<label htmlFor="destination">End Zip</label>
<input
type="text"
name="destination"
id="destination"
onChange={e => handleChange(e, updateDestinationInput)}
/>
</section>
<section>
<input type="submit" value="Get Directions" />
</section>
</form>
</div>
);
Backend Code
#path.route('/path', methods=['POST'])
def path_info():
request_data = request.get_json()
ORIGIN = request_data['origin']
DESTINATION = request_data['destination']
# The df var is pd.DataFrame(zip([ORIGIN, get_lon(ORIGIN), get_lat(ORIGIN)], [DESTINATION, get_lon(DESTINATION), get_lat(DESTINATION)])).T
df, MILES = preprocess(ORIGIN, DESTINATION)
print(df)
return {
'origin': {
'longitude': df['LON'][0],
'latitude': df['LAT'][0]
},
'destination': {
'longitude': df['LON'][1],
'latitude': df['LAT'][1]
},
'miles': MILES
}
Thanks in advance!

Answer 1

I was initially under the impression that you only use POST requests when inserting into a database, so I was defining my API endpoints as GET methods. However, since I am under the assumption that it is best to not pass body parameters for GET methods, my current solution is to have it as a POST request. Is this the best practice? Or is there a better way to do it?
Today: if you need to send information in the body of the HTTP request, then you should expect to use POST (with PUT/PATCH available in specific cases).
If you want to instead use GET, then you need to take the information collected by the form and figure out how to encode it into the request URI itself. On the web, that usually takes the form of key value pairs that have been application/x-www-form-urlcoded and copied into the query part of the request URI. It doesn't have to be in the query part - URI Templates can be used to describe the expansion of URI paths as well.
There is an internet draft to standardize a new HTTP method (QUERY) which would provide semantics for a safe request with a message body; but that method hasn't been standardized or registered yet.