Question

我有一个显示“ressource”的网页（也就是mongodb集合中的一个条目），在该网页上我想要一个“删除”按钮，它会向服务器发送“删除”请求到正确的路线。路由器工作（所以当我使用外部程序发送删除请求时，该条目被删除），但我希望链接相同。

显然，在做了一些研究之后，我需要使用ajax函数来做到这一点，就像在this post中一样。问题是我无法使其工作（可能是因为我刚开始使用jquery），当我点击按钮时似乎没有任何反应。但是，如果我尝试一个简单的alert（），它就可以('#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代码吗？还是有另一种方式？如果需要，请不要犹豫，要求更多代码，我会尽可能快地回答你。

最好的问候。

Answer 1

看看jQuery ajax docs：http://api.jquery.com/jquery.ajax/

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

Answer 2

<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

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

2 个答案: