Вот так:
const button = document.querySelector('#button');
const closeButton = document.querySelector('#closeButton');
const form = document.querySelector('.form');
const popup = document.querySelector('.popup');
const table = document.getElementById('mine_info');
button.addEventListener('click', () => {
openForm();
});//вызов функции открытия формы
closeButton.addEventListener('click', () => {
closeForm();
});//вызов функции закрытия формы
const httpRequest = (url, options) => {
return fetch(url, options)
.then(response => response.json())
.then(console.log)
.catch(console.error);
};
const postOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
}
};//тело Post-запрос
const getOptions = {
method: 'GET',
headers: {
'Content-Type': 'application/json',
}
};//тело Get-запрос
const postRequest = data => {
return httpRequest('http://данные:3000/mine_info', {
...postOptions,
body: JSON.stringify(data)
});
};//указания при POST-запросе
const getRequest = () => {
return fetch('http://данные:3000/mine_info', getOptions)
.then(response => response.json())
.then(data => {
updateTable(data);
})
.catch(console.error);
};//указания при GET-запросе
const updateTable = data => {
data.forEach(item => {
const newRow = document.createElement("tr");
for (let key in item) {
const newCell = document.createElement("td");
newCell.textContent = item[key];
newRow.appendChild(newCell);
}
table.appendChild(newRow);
});
};//создание константы, где будет происходить действия с таблицей
window.onload = function() {
getRequest();
};//для того чтобы при загрузке страницы происходил GET-запрос
const openForm = () => {
form.classList.add('open');
popup.classList.add('popup_open');
};//функция открытия формы
const closeForm = () => {
form.classList.remove('open');
popup.classList.remove('popup_open');
};//функция закрытия формы
const formHandler = (e) => {
e.preventDefault();
const data = Object.fromEntries(new FormData(e.target).entries());
postRequest(data)
.then(() => {
closeForm();
location.reload();
})
.catch(console.error);
};//отправка данных из формы
form.addEventListener('submit', formHandler);
А JSON формируется благодаря Node.js
const Pool = require('pg').Pool
const pool = new Pool({
user: '',
host: '',
database: '',
password: '',
port: 5432,
})//Данные для подключения к БД
const getMineinfo = (request, response) => {
pool.query('SELECT * FROM mine_info', (error, results) => {
if (error) {
throw error
}
response.status(200).json(results.rows)
})
}//Создание константы getMineinfo, где вызывается SQL-команду "SELECT", для того чтобы взять данные из БД
const createRow = (request, response) => {
const { id_k1, n_mine, name_mine, adress, full_name_of_direcor, phone_number } = request.body
pool.query('INSERT INTO mine_info (id_k1, n_mine, name_mine, adress, full_name_of_direcor, phone_number) VALUES ($1, $2, $3, $4, $5, $6) RETURNING *', [id_k1, n_mine, name_mine, adress, full_name_of_direcor, phone_number], (error, results) => {
if (error) {
throw error
}
response.status(201).send(`User added with ID: ${results.rows[0].id}`)
})
}//Создание константы createRow, где вызываеться SQL-команда "INSERT INTO", для взятия информации из формы и записи её в БД
module.exports = {
getMineinfo,
createRow,
}//Берём из файла.js файла
//файл.js
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const db = require('./queries')
const app = express()
const port = 3000
app.use(bodyParser.json())
app.use(
bodyParser.urlencoded({
extended: true,
})
)
app.get('/', (request, response) => {
response.json({ info: 'Node.js, Express, and Postgres API' })
})
app.use(cors())
app.get('/mine_info', db.getMineinfo)
app.post('/mine_info', db.createRow)
app.listen(port, () => {
console.log(`App running on port ${port}.`
)})