Python + Svelte – post and get requests
Description of the interaction of transferring information from front to back via GET and POST in Svelte and Python.
GET
JavaScript
The function gets the domain depending on the environment (local or live). It will be useful to us in the future.
let url = window.location…href…split(“/”);
let domain = url[0] + “//” + url[2] + ‘/’;
if (url[2] === ‘localhost’) {
return domain + url[3];
}
return domain;
}
The main function for sending a get request. In it, we use the function above for domain substitution.
export async function getFetch(url) {
let response = await fetch(getDomain() + url);
return response.json();
}
Let’s put these functions into a file main.js… These are general functions that will be used throughout the project.
Svelte
On the Svelte side, we import the function to request the get from the main file:
import {getFetch} from ‘../main’;
Further we will refer to this function to pass the values we need. For example, in this way:
function saveUsersData(deposit) {
getFetch(‘deposit / save-user-data /’
+ deposit.user_id_time + ‘/’
+ deposit.time + ‘/’
+ deposit.date + ‘/’
+ deposit.deposit
);
}
We will not dwell on how values are passed here. This data is passed to the function via events – you can learn about this in the article on events on Svelte.
Python
On the python side, we use Flask and Blueprint and get the data like this:
@deposit_bp.route(‘/ save-user-data /
@login_required
def save_user_data(user_id_time, time, date, deposit):
pass
Inside this function, you process the received data at your discretion.
POST
JavaScript
Let’s add a function to our main.js file to send Post requests:
export async function postFetch(url, data) {
let response = await fetch(getDomain() + url, {
method: ‘POST’,
headers: { “Content-Type”: “application / json” },
body: JSON.stringify(data)
});
return response.json();
}
Svelte
Let’s import the function in the same way:
import {postFetch} from ‘../main’;
Then we call it and pass our data there:
let data = {
‘user_id_time’: deposit.user_id_time,
‘time’: deposit.time,
‘date’: deposit.date,
‘deposit’: deposit.deposit,
‘description’: deposit.description
}
postFetch(‘deposit / save-user-data /’, data);
}
Python
In python, we get this data like this:
@login_required
def save_user_data():
data = request.get_json()
description = data[‘description’]
user_id_time = data[‘user_id_time’]
time = data[‘time’]
date = data[‘date’]
deposit = data[‘deposit’]
return json.dumps(‘ok’)
We do something with them and, if necessary, return them back. In this example, we always return, because our JS function always waits for a response after sending.
this is extremely helpful, any chance you could link to a github? I would love to see the full code. Ive been banging my head against this problem for quite some time.