Fetch - how to change a single element without reloading the entire page?

A

Alexey2020-05-23 20:17:34

JavaScript

Alexey, 2020-05-23 20:17:34

<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);
}

Server:

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);

Algorithm:
I go to the main page of my site localhost:5000
When I click on the submit button, the site sends a request to the server and receives a string of the "dom" variable, which should add the "p" tag to the end of the document without reloading the page.

How can I force the site to change the dom structure after receiving a response from the server?
or what am I doing wrong?)
Plus, I would like to get an explanation on what principles modern dynamic sites work on or where they chew it in detail

PS I'm trying to understand requests / responses. I plan to learn express later

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

H

hzzzzl, 2020-05-23
@Evelate

snippet

force the site to change the dom structure after receiving a response from the server

a bunch of methods, starting from stupidly adding innerHTML , to "type createElement, appendChild, insertAdjacentElement, etc" etc etc etc, depending on what and how to do

D

Dima Polos, 2020-05-23
@dimovich85

Request - response happens through ajax. On the client side, there is js that changes the DOM. Usually they take react / vue / angular, but there are situations that it’s easier and more reasonable to write in vanilla. Vanilla can, and was created for this, work with the DOM. There are methods on the document object, such as createElement, appendChild, insertAdjacentElement, and so on.