Не могу понять как правильно сформировать GET запрос

Question

Не могу понять как правильно сформировать GET запрос

Рейтинг: 0Ответов: 2Опубликовано: 22.08.2023

У меня есть таблица

<table id="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>

Она отправляет данные из формы в БД(методом POST) и возвращает берёт данные из JSON, который находиться по ссылке http://что-то:3000/info

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

И всё работает и всё хорошо, только вот я хотел не много другого. Я хотел что бы при GET-запросе данные которые идут при нём выводились в новые строки уже существующей таблицы. Я даже придумал примерный алгоритм

for (let i = 0; i < info.length; i++){
        const row = document.createElement('tr');
        for (let j =0; j < info[i].length; j++){
          const cell = i === 0 ? document.createElement('th') : document.createEvent('td');
          cell.textContent = info[i][j];
          row.appendChild(cell);
        }
        info.append(row);
      }

И я пытался это "вставить" вместо строки .then(console.log) точнее вместо значения console.log, но получаю кучу ошибок из этого я сделал вывод что не туда это нужно "вставлять", только вот не пойму, а куда нужно ?

javascript html ajax

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Оберните ваш алгоритм в функцию. Примерно так:

.then(info => function(info){
    for (let i = 0; i < info.length; i++){
        const row = document.createElement('tr');
        for (let j =0; j < info[i].length; j++){
          const cell = i === 0 ? document.createElement('th') : document.createEvent('td');
          cell.textContent = info[i][j];
          row.appendChild(cell);
        }
        info.append(row);
      }
})

Правда, алгоритм довольно странный. На каждом шаге цикла к info добавляется ещё строка. Так он никогда не завершится.

Answer 2

▲ 0

я провёл оптимизацию кода, и сделал верные запросы GET и POST, выглядят они у меня следующим образом:

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');
const del = document.querySelector("#del")

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

Не могу понять как правильно сформировать GET запрос

Ответы