djangoのModelオブジェクトを削除するjqueryを使用するAjax

Question

jquery/ajaxを使用してオブジェクトを削除するのは苦労します。私はアポイントメントモデルからのオブジェクトのリストを含む行を持つテーブルを実装しました。各行に削除ボタンがあります。オブジェクトのテーブルの

テンプレートは次のとおりです。

<table class="table table-striped table-bordered table-list"> 
    <thead> 
    <tr> 
     <th><em class="fa fa-cog"></em></th> 
     <th class="hidden-xs">ID</th> 
     <th>Patient Name</th> 
     <th>Day</th> 
     <th>Time</th> 
     <th>Location</th> 
    </tr> 
    </thead> 
    <tbody> 
     {% for appointment in appointments %} 
      <tr> 
       <td align="center"> 
        <button class="delete_button" id="{{ appointment.id }}"> 
         <em class="fa fa-trash"></em> 
        </button> 
       </td> 
        <td>1</td> 
       <td class="hidden" id="appointment_id">{{ appointment.id }}</td> 
       <td>{{ appointment.patient }}</td> 
       <td>{{ appointment.day }}</td> 
       <td>{{ appointment.time }}</td> 
       <td>{% if appointment.clinic %} 
         {{ appointment.clinic }} 
         {% endif %} 
         {% if appointment.hospital %} 
         {{ appointment.hospital }} 
         {% endif %} 
       </td> 
      </tr> 
     {% endfor %} 
    </tbody> 
</table> 

Javascriptが以下の通りです：

$(document).ready(function(){ 
    $(".delete_button").click(function() { 
     var id = $(this).attr('id'); 
     $.ajax({ 
      url: "{% url 'deleteappointment' %}", 
      data: { 'id' : id }, 
      beforeSend: function(xhr) { 
       xhr.setRequestHeader("X-CSRFToken", {% csrf_token %}); 
      }, 
      success: function(response){ 
      } 
     }); 
    }); 
}); 

私は削除ボタンをクリックしたときに何も起こりません。私はここで間違って何をしていますか？コンソールに にSyntaxError：

EDIT 2 これは、Ajaxリクエストで起こっている

beforeSend: function(xhr) { 
     xhr.setRequestHeader("X-CSRFToken", <input type='hidden' name='csrfmiddlewaretoken' value='LUgmNbcWfkIR9KpLi7lzsn0QOk' />); 
       }, 

私はここで全体の入力フィールドをレンダリングするためにcsrftokenタグを防ぐにはどうすればよいですか？

Answer 1

フォームのhtml形式でトークンを挿入する{% csrf_token %}テンプレートタグを使用しています。コンソールにエラー

xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");