Как отправить данные на сервер?

Question

При использовании yandex.maps выбираю адрес доставки. Как отправить этот адрес на сервер и получить его же с сервера?

main.py:

import os

from fastapi import FastAPI, Request, WebSocket
from fastapi.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles
from dotenv import load_dotenv

load_dotenv()

app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")

templates = Jinja2Templates(directory="")

@app.get("/")
async def get(request: Request):
    return templates.TemplateResponse(
        "index.html",
        {"request": request, 
        "bella": os.getenv('SECRET_KEY'),
        "YANDEX_MAPS_API_KEY": os.getenv('YANDEX_MAPS_API_KEY'),}
        )

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    while True:
        data = await websocket.receive_text()
        await websocket.send_text(f"Message text was: {data}")

index.html:

<!DOCTYPE html>

<head>
    <title>Определение адреса клика на карте с помощью обратного геокодирования</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="static\css\styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey={{YANDEX_MAPS_API_KEY}}" type="text/javascript"></script>
    <script src="static/scripts/event_reverse_geocode.js" type="text/javascript"></script>
    
</head>
<body>
    <p class="header">Кликните по карте, чтобы указать адрес</p>
    <div id="map" style="width: 600px; height: 400px"></div>
    <div id="adress_box">Ищем доставку по адресу <span id="address_confirm"></span></div>
    <div id="shop-box"><p>shop-box</p></div>


<script> 
let response = await fetch(url);

if (address_confirm) { // если HTTP-статус в диапазоне 200-299
  // получаем тело ответа (см. про этот метод ниже)
  let json = await response.json();
  consol.log('response.ok')
} else {
  alert("Ошибка HTTP: " + response.status);
} 
</script>
</body>
</html>

Пробовал использовать WebSockets по туториалу с сайта FastAPI, но у меня не используется форма. Как мне после нажатия на карте и получения адреса перехватить его и отправить на сервер?

Answer 1

Отправляем данные на сервер:

async function responseCoords(coords) {
    // функция responseCoords отправляет на сервер координаты доставки
    let response = await fetch('http://127.0.0.1:8080/', {
        method: 'POST', 
        headers: {
            'Content-Type': 'application/json;charset=utf-8'
        },
        body: JSON.stringify(coords)
    }) ; 
      markets = await response.json();
      rendering_markets_list(markets);//  эта функция отрисовывает магазины на странице
}

Сервер обрабатывает полученные координаты отправляет результаты обратно

@app.post('/')
async def add_address(request: Request):
    ''' Функция запрашивает доступные магазины с доставкой по
        указанному адресу
    '''    
    coords = await request.json()
    markets = sb_p.get_markets(lat = coords[0], lon = coords[1]) # скрипт обрабатывает координаты
    list_markets = markets
    return list_markets

БЛОГ НА HUSL

Как отправить данные на сервер?

Ответы (1 шт):