<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
