Удалить запрос на экспресс с помощью формы не работает

Question

Когда я пытаюсь удалить данные из базы данных через форму, используя node.js и выразить, что это не удаление каких-либо данных.Как я знаю, есть только два метода get и post.нет метода удаления.

router.js код

router.delete('api/:id', (req, res, next) => {
const id = req.params.id;
pool.query(`delete from book WHERE id = ?`, id, (err, result) => {
    if (err) throw err;
        res.status(201).json({ msg: `Deleted`});
  });
});

код формы:

<form action="/api" method="">
 <input type="number" name="id" placeholder="delete" /><br/>
</form>

какой здесь должен быть метод?я попытался дать post и get но тщетно.

Answer 1

Если вы отметите MDN документы :

метод HTTP-метод, который браузер использует для отправки формы.Возможные значения:

post : соответствует методу HTTP POST;данные формы включаются в тело формы и отправляются на сервер.

get : соответствует методу HTTP GET;данные формы добавляются к URI атрибута действия с символом «?»в качестве разделителя и полученного результата.

Если вы хотите отправить удаление, прослушайте событие submit в форме, вызовите event.preventDefault(), чтобы остановить действие по умолчанию, и сделайте свой собственный запрос.к бэкэнду, который в любом случае является более типичным «современным» способом сделать это, поскольку он не приводит к обновлению страницы.

Кроме того, ваш маршрут не будет поврежден без чего-либо в части :id.

Один из способов сделать это заключается в следующем:

Дайте вашей форме класс или найдите способ ссылаться на нее

<form action="/api" method="post" id="test-form">
    <input type="number" name="id" placeholder="delete" /><br/>
</form>

В вашем JavaScript найдите способ ссылки на форму и запретите ее отправку:

const form = document.getElementById('test-form');
form.addEventListener('submit', async event => {
    event.preventDefault();     // This prevents the form from submitting using POST

    const idInput = form.querySelector('input[name="id"]');
    const id = idInput.value;

    const res = await fetch(`https://apiurl.com/api/${id}`, {
      method: 'DELETE',
    });
    const json = await res.json();

    console.log(json);
});

Answer 2

Поскольку форма не поддерживает метод удаления, вы можете запретить отправку формы автоматически и отправить запрос вручную, используя либо API выборки, либо jquery xhr:

 <form action="/api" method="" id="deleteApi">
    <input type="number" name="id" placeholder="delete" /><br/>
    <input type="submit" value="Submit">
 </form>

js код:

  $('#deleteApi').submit(function(event){
    event.preventDefault();
   // send a DELETE request to the api here

     $.ajax({
        url: '/api',
        type: 'DELETE',
        //data: ....
     }).done(function(res) {
        alert( "success", res );
     }).fail(function(err) {
        alert( "error", err );
     })
  })