2017-04-13 12 views
0

私は "ressource"(mongodbコレクションからの単なるエントリー)を表示しているWebページを持っています。そのWebページ上で、 "delete"ボタンを使ってサーバーに "delete"リクエストを送ります正しい経路。 ルーターが動作します(外部プログラムを使用して削除要求を送信すると、そのエントリは削除されます)が、リンクと同じになります。ボタンとjqueryでノードにDELETEリクエストを送信するには?

明らかに、いくつかの調査を行った後、私はthis postのように、それを行うためにajax関数を使用する必要があります。問題は、(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コードが必要なのを手伝ってもらえますか?または別の方法がありますか? 必要に応じてさらにコードを尋ねることをためらわずに、私はできるだけ早くあなたに答えるためにできるだけ反応的になるでしょう。

よろしくお願いいたします。

+0

だから、Ajax呼び出しを行います。あなたが試した正確なコードは何ですか? – epascarello

+0

idは '#'ですが、削除ボタンにはクラスがあります。したがって、 '#delete'の代わりに' .delete'を使用してください。 –

+0

@epascarelloリンク上のものですが、私のjqueryに何か間違っているようです。 – Xogno

答えて

1

は、jQueryのAjaxのドキュメントを見てみましょう:http://api.jquery.com/jquery.ajax/

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

'メソッド: 'DELETE'、'? –

+0

このコードは素晴らしい:)! 私はそれを必要としなかったので、私は "データ"を削除しました。 '$( '#削除')(、(){ \t場合(確認( "あなたはこのressourceを削除してもよろしいですか?")) { を機能を 'クリック' 上:。 はここで完全なjsのコードです\t \t $アヤックス({ \t \t \t URL: '/ ressources/T/<%= ressource._id%>'、 \t \t \t方法:[削除]、 \t \t \t}) \t \t \t。 done(function(){ \t \t \t console.log( 'deleted'); \t \t \t window.location.reload(true); \t \t}); } }); ' – Xogno

+0

@Masivuye Cokile:はい、HTTPリクエストメソッドを見てください:https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods –

0
<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 
+0

コードだけの回答は良い答えとはみなされませんが、これはプロブラム –

+0

@ComEngTrを解決することができますが、私の質問に直接答えないようです。とにかく、ディミトリ・Lの答えが私を助けました! – Xogno