如何使用button和jquery向节点发送DELETE请求？

问题描述：

我有一个网页显示了“资源”（又名MongoDB集合中的一个条目），并且在该网页上我想要一个“删除”按钮，它将发送一个“删除”请求到服务器正确的路线。路由器的工作原理（所以当我使用外部程序发送删除请求时，该条目被删除），但我想要一个链接。如何使用button和jquery向节点发送DELETE请求？

显然，在做了一些研究后，我需要使用ajax函数来做到这一点，如this post。问题是我不能使它工作（可能是因为我刚开始使用jQuery），当我点击按钮时似乎没有任何反应。但是，如果我尝试一个简单的警报（），它的工作原理是('#delete').on('click',function(){ alert('clicked')});。

所以

下面是基本的html：

$('#delete').on('click', function() { 
 
    alert('click'); 
 
    //here would be the code to send the DELETE request ? 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
    <meta charset="utf-8"> 
 
    <title>Storystrap Template</title> 
 
    <meta name="generator" content="Bootply" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 
    <!-- bower:css --> 
 
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css" /> 
 
    <!--endbower--> 
 
    <!-- bower:js --> 
 
    <script src="/lib/jquery/dist/jquery.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="/lib/bootstrap/dist/js/bootstrap.js"></script> 
 
    <script src="/js/printplugin.min.js"></script> 
 

 
    <!--inject:js--> 
 
    <script src="/js/app.js"></script> 
 
    <script src="/js/modernizr-custom-touch.js"></script> 
 

 

 
</head> 
 

 
<body> 
 
    <button class="delete" data-target="/" data-method="DELETE" data-disabled="true">Delete Ressource</button> 
 
</body> 
 

 
</html>

这里是在node.js的路由代码（此代码的工作，如果我手动发送DELETE请求），该id应该在页面的链接中

ressourcesRouter.route('/ressources/t/:ressourcesId') 
// permet d'afficher UNE ressource spécifique 
    .get(function(req,res){ 

     var returnRessource = req.ressource.toJSON(); 

     res.render('ressourceView', { 
        title: 'Ressources', 
        ressource: returnRessource 
       }); 

    }) 
    .delete(function(req,res){ 
     req.ressource.remove(function(err){ 
      if(err) 
       res.status(500).send(err); 
      else{ 
       res.status(204).send('Removed'); 
       console.log('ressource supprimée'); 
      } 
     }); 
    });

你能帮我找出需要的ajax代码吗？还是有另一种方式？如有需要，请随时索取更多代码，我会尽可能迅速地回复您。

此致敬礼。

所以使Ajax调用。你试过的确切代码是什么都行不通？ – epascarello

'＃'代表id，但您的删除按钮有类。所以使用'.delete'而不是'＃delete' –

@epascarello链接上的一个，但它似乎有什么问题，我的jQuery。 – Xogno

答

看看jQuery的AJAX文档：http://api.jquery.com/jquery.ajax/

$.ajax({ 
    url: '/ressources/t/123', 
    method: 'DELETE', 
    data: yourdata 
}) 
    .done(function(data) { 
    console.log(data); 
    });

'方法：'删除'，'？ –

这段代码很棒:)！我删除了“数据”，因为我不需要它。下面是完整的js代码： '$（ '＃删除'）上（ '点击'，函数（）{ \t如果（确认（ “你确定要删除此的ressource？”）） { 。 \t \t $就（{ \t \t \t网址： '/ ressources /吨/ '， \t \t \t方法： '删除'， \t \t \t}） \t \t \t。完成（功能（）{ \t \t \t console.log（'deleted'）; \t \t \t window.location.reload（true）; \t \t}）; } }）; ' – Xogno

@Masivuye Cokile：是的，看看HTTP请求方法：https：//en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods –

答

<script type="text/javascript"> 
$(document).ready(function(){ 

    $('table#delTable td a.delete_link').click(function() 
    { 
     if (confirm("Are you sure you want to delete this row?")) 
     { 
      var id = $(this).parent().parent().attr('id'); 
      var data = 'id=' + id ; 
      var parent = $(this).parent().parent(); 

      $.ajax(
      { 
        type: "POST", 
        url: '../scripts/delete_link.php', 
        data: 'link=' + $(this).attr('data_link') + '&topic_pk=' + $(this).attr('data_topic') + '&topic_introduction=' + $(this).attr('data_introduction'), 
        cache: false, 

        success: function() 
        { 
        parent.fadeOut('fast', function() {$(this).remove();}); 
        } 
      }); 
     } 
    }); 
}); 

</script> just look at this. it can solution your problem. Dont Forget your datatable's name

代码只有答案不被视为一个很好的答案，即使这可以解决问题 –

@ComEngTr它似乎你没有直接回答我的问题。无论如何，Dimitri L.的回答帮了我的忙！ – Xogno

如何使用button和jquery向节点发送DELETE请求？

相关推荐