logo标签列表

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

node.jsajaxexpress
3
我是一位有用的助手，可以为您翻译文本。
我正在尝试使用NodeJs和Express构建REST API（我是一个非常初学者的程序员），CRUD请求在Postman中工作正常，但现在我不知道如何通过AJAX表单发送DELETE请求。我只想在文本输入框中插入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
  }});
 });
});

你的表单使用了POST方法，我不确定HTML表单是否支持DELETE方法。 - TGrif
4个回答
6
4
您的表单应该有一个隐藏字段，显示您正在进行删除请求，如下所示：

<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已经不再必要，如果你发送了一个删除请求，因为这是多余的。
2

如果您想通过Ajax提交表单将DELETE请求发送到App.js文件，请先构建HTML表单，构建ajax脚本，最后在app.js文件中构建一个监听您的Delete请求的路由。请按照以下步骤进行...

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

0
**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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接