Как при отправки данных на сервер не обновлять сайт

Question

import { postData } from "../services/postData.js";
import { state } from "../environment/environment.js";

const addTaskBtn = document.querySelector('.add-card__add');
const taskTitle = document.querySelector('.add-card__title');
const taskDesc = document.querySelector('.add-card__desc');
const taskSphere = document.querySelector('.add-card__sphere');
const taskDate = document.querySelector('.add-card__date')

function createTask () {
    const newTask = {
        Title: taskTitle.value,
        Desc: taskDesc.value,
        Info: taskSphere.value,
        Date: taskDate.value,
        Status: false,
    }

    postData(state.url, JSON.stringify(newTask)).then((responce) => {
        console.log(responce);
    })
}

addTaskBtn.addEventListener('click', () => {
    createTask ();
});


// Post data
async function postData (url, data) {
    const result = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-type': 'application/json'
        },
        body: data
    });

    if(!result.ok) {
        throw new Error(`Error status:" ${res.status} from ${res.url}`);
    }

    return result.json();
}

export {
    postData
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./source/style/index.css">
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">-->
</head>
<body>

    <div class="container">
        <div class="filter">
            <button class="filter__all">Все</button>
            <button class="filter__true">Сделаные</button>
            <button class="filter__false active">Не сделаные</button>
        </div>
        
        <div class="cards">
            <div class="cards__all card"></div>
            <div class="cards__true card"></div>
            <div class="cards__false card"></div>
        </div>

        <div class="cards-add">
            <div class="cards__add">
                <button class="add__btn"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="5" width="2" height="12" rx="0.8" fill="#DD4B39"/>
                    <rect y="7" width="2" height="12" rx="0.8" transform="rotate(-90 0 7)" fill="#DD4B39"/>
                    </svg>Добавить задачу</button>
            </div>
            <div class="add-card hidden">
                    <div class="add-card__body">
                        <input type="text" placeholder="Семейный обед в воскресенье в 11:00" class="add-card__title">
                        <input type="text" placeholder="Описание" class="add-card__desc">
                        <div class="add-card__group">
                            <input class="add-card__sphere" placeholder="Сфера"></input>
                            <input type="date" class="add-card__date">
                        </div>
                    </div>
                    <div class="add-card__btns">
                        <button class="add-card__cancel">Отмена</button>
                        <button class="add-card__add">Добавить</button>
                    </div>
            </form>
        </div>
    </div>

    <script src="./source/js/index.js" type="module"></script>
    <script src="./source/js/components/tabListener.js" type="module"></script>
    <script src="./source/js/components/createTasks.js" type="module"></script>
</body>
</html>

БЛОГ НА HUSL

Как при отправки данных на сервер не обновлять сайт

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