Question

我正在尝试使用NodeJs和Express构建一个REST API（我是编程的初学者），CRUD请求在Postman中工作正常，但现在我不知道如何通过一个DELETE请求发送使用AJAX形成。我只想在文本输入中插入一个id并将其提交给服务器以删除MongoDB中的文档。我到处搜索，但我无法理解如何执行此操作。

App.js

app.delete('/delete/:id', (req, res) => {
  let id = req.params.id;
  if (!ObjectID.isValid(id)) {
    return res.status(400).send();
  }
  Blog.findByIdAndRemove(id).then((docs) => {
    res.status(200).send({docs})
  }).catch((e) => {
    res.status(400)
  });
});

HTML

                                                   <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Titolo</title>
  </head>
  <body>
    <form action='/delete/:id' method="POST">
      <input id="id" type="text" name="id" /><br />
      <button id:"cancella" type="submit">Submit</button>
    </form>

    <script src="/js/jquery.js"></script>
    <script src="/js/script.js"></script>
  </body>
</html>

的script.js

$(document).ready(function() {
 $('#cancella').on("click", function() {
  var id = $('#id').val();
  $.ajax({
   url: '/delete/:id',
   type: 'DELETE',
   data: {"id": id},
   dataType: 'json',
   success: function(data) {
    //do something
  }});
 });
});

Answer 1

HTML表单不支持PUT或DELETE方法但是节点应用程序有这样的解决方法https://github.com/expressjs/method-override

Answer 2

您的表单应该有一个隐藏字段，表明您正在发出如下删除请求：

<html>
<head>
<meta charset="utf-8">
<title>Titolo</title>
</head>
  <body>
<form action='/delete/:id' method="POST">
  <input type="hidden" name="_method" value="PUT"/>
  <input id="id" type="text" name="id" /><br />
  <button id:"cancella" type="submit">Submit</button>
</form>

<script src="/js/jquery.js"></script>
<script src="/js/script.js"></script>
</body>
</html>

如果您发送删除请求，则不再需要使用/delete，因为它是多余的。

Answer 3

如果您想通过将表单通过Ajax提交到App.js文件来发送DELETE请求，则首先构建HTML表单，构建ajax脚本，最后在app.js文件中构建一条路由，以侦听您的Delete Request。 ..

在 HTML

中

<form class="delete-form">
    <input id="id" type="text" name="id" /><br />
    <button type="submit" name="submit">Submit</button>
  </form>

在 Script.js

中

$(document).ready(function() {
      $('.delete-form').on("click", function(e) {
          e.preventDefault();
          var id = $('#id').val();
          $.ajax({
              type: 'DELETE',
              url: '/delete/' + id,
              success: (data) => {
                console.log(data);
              },
              error: (err) => {
                console.log(error);
              });
          });
      });

App.js

app.delete('/delete/:id', (req, res) => {
  let id = req.params.id;
  if (!ObjectID.isValid(id)) {
    return res.status(400).send();
  }
  Blog.findByIdAndRemove(id).then((docs) => {
    res.status(200).send({
      docs
    })
  }).catch((e) => {
    res.status(400)
  });
});

Answer 4

**action='/delete/:thisIsDynamicId'**

<块引用>

您也可以在 html 中使用它。它工作正常，动作表单必须传递动态 ID。

<html>
      <head>
        <meta charset="utf-8">
        <title>Titolo</title>
      </head>
      <body>
        <form action='/delete/:thisIsDynamicId' method="POST">
          <button id:"cancella" type="submit">Submit</button>
        </form>
    
        <script src="/js/jquery.js"></script>
        <script src="/js/script.js"></script>
      </body>
    </html>

如何使用Node / Express和AJAX发送表单删除请求？

4 个答案: