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.

export function getDomain() {
let url = window.locationhrefsplit(“/”);
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 / / , methods=[‘GET’])
@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:

function saveUsersData(deposit) {
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:

@deposit_bp.route(‘/ save-user-data /’, methods=[‘POST’])
@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.

Similar Posts

One Comment

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

Leave a Reply

Your email address will not be published. Required fields are marked *