<table id="mine_info">
<tr>
<th>№ п/п</th>
<th>Номер </th>
<th>Название</th>
<th>Адрес</th>
<th>ФИО</th>
<th>Номер телефона директора</th>
</tr>
<tr>
<td><p>1</p></td>
<td><p>1</p></td>
<td><p>Пример названия</p></td>
<td><p>Пример адреса</p></td>
<td><p>ФИО директора</p></td>
<td><p>+00000000000</p></td>
</tr>
</table>
<button type="submit" name = "submit" id="contact">Отправить в БД</button>form.addEventListener('submit', async(e) => {
e.preventDefault();
const data = Object.fromEntries(new FormData(form).entries());
try {
const response = await fetch('http://:3000/info/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});//AJAX-запрос типа POST, для записи дыннных из формы в БД
/*const request = await fetch('http://:3000/info/', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
for (let i = 0; i < mine_info.length; i++){
const row = document.createElement('tr');
for (let j =0; j < mine_info[i].length; j++){
const cell = i === 0 ? document.createElement('th') : document.createEvent('td');
cell.textContent = mine_info[i][j];
row.appendChild(cell);
}
table.append(row);
},
}); попытка в GET-запрос*/
} catch (error) {
// show some error message in the DOM
console.log('err: ', error);
}
form.classList.remove('open');
popup.classList.remove('popup_open');
});
// Get form element
const form = document.querySelector('form');
// Implementation DRY principe, write repeated code into function
const httpRequest = (url, options) => fetch(url, options)
.then(response => response.json())
.then(console.log)
.catch(console.error);
// Create post request options
const postOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
}
};
// Create get request options
const getOptions = {
method: 'get',
headers: {
'Content-Type': 'application/json',
}
};
// Create post request function
const postRequest = data => httpRequest('http://:3000/info/', {
...postOptions,
body: JSON.stringify(data)
});
// Create get request function
const getRequest = _ => fetch('http://:3000/info/', getOptions)
.then(response => response.json())
.then(console.log)
.catch(console.error);
// Create form handler
const formHandler = (e) => {
// End handler after request
e.preventDefault();
// Get data from form
const data = Object.fromEntries(new FormData(e.target).entries());
// Send post request
postRequest(data);
// Send get request
getRequest();
form.classList.remove('open');
popup.classList.remove('popup_open');
}
// Set form handler
form.addEventListener('submit', formHandler);
Сложный
Простой
Средний
