@Evelate

Fetch — как изменять отдельный элемент без перезагрузки всей страницы?

<body>
<h1>HI</h1><p>Response succesed</p>
<input id="button" type="submit" value="Отправить" onclick="fPost()">
</body>


async function fPost(){
    let response = await fetch("http://localhost:5000/", {
        method: 'POST'
    });

    let dom = await response.json();
    console.log(dom);
}


Сервер:
const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');

let html;
let js;

fs.readFile('./index.html',(err, data) => {
    if (err){
        throw err;
    }
    html = data;
});

fs.readFile('./one.js',(err, data) => {
    if (err){
        throw err;
    }
    js = data;
});

const server = http.createServer();

server.on('request', (req, res) => {

    if (req.url === '/' && req.method === 'GET'){
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(html);
    }

    if (req.url === '/one.js'){
        res.writeHead(200, {'Content-Type': 'text/javascript'});
        res.end(js);
    }
    console.log(req.method);

    if (req.method === 'POST' && req.url === '/'){
        res.writeHead(200, {'Content-Type': 'application/json'});
        //res.write(html);
        res.write(jsonDom);
        console.log("<p>json!!!</p>");
        res.end();
    }
});


server.listen(5000);
console.log("Слушаю порт 5000");

let dom =
    'let p = document.createElement("p");' +
    'p.textContent = "Hello";' +
    'document.body.appendChild(p);';

let jsonDom = JSON.stringify(dom);

console.log(jsonDom);


Алгоритм:
Захожу на главную страницу моего сайта localhost:5000
При нажатии на кнопку отправить, сайт отправляет запрос на сервер и получает строку переменной "dom", которая должна добавить в конец документа тег "р" без перезагрузки страницы.

Как мне заставить сайт изменить dom структуру после получения ответа от сервера?
или что я делаю не так?)
Плюс хотелось бы получить объяснение, по каким принципам работают современные динамические сайты или где подробно разжевывают это

P.S. пытаюсь понять запросы/ответы. Позже планирую изучить express
  • Вопрос задан
  • 164 просмотра
Решения вопроса 1
hzzzzl
@hzzzzl


заставить сайт изменить dom структуру после получения ответа от сервера

куча методов, начиная с тупо добавить innerHTML , до "типа createElement, appendChild, insertAdjacentElement, и тд" итд итп, смотря что и как надо сделать
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
dimovich85
@dimovich85 Куратор тега JavaScript
Уроки по JS - https://t.me/school_ofpery
Запрос - ответ происходит через ajax. На стороне клиента есть js, который меняет DOM. Обычно берут react / vue / angular, но бывают ситуации, что и на ваниле написать проще и разумнее. Ванила умеет, для того и создавалась, работать с DOM. Есть методы у объекта document, типа createElement, appendChild, insertAdjacentElement, и тд.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы