ajax - Ajaxコードが実行されていません

Question

私はAjaxを学んでいますが、少し問題がありました。

私はajaxを使ってdjangoバックエンドにPOSTリクエストを提出しようとしています。 それでも画面にアラートが表示されません。 テスト用のdjangoサーバシェルにあるように、POSTリクエストを送信することさえできません。

コード：

<script type="text/javascript"> 
    $('#btnLike').on('click', function(event) { 
    alert('ok'); 

     $.ajax({ 
     type: 'POST', 
     url: 'http://127.0.0.1:8000/backend/website/like', /* for testig */ 
     data: { 
     csrfmiddlewaretoken: {% csrf_token %}, 
     post_id = $('#post_id').val(), 
     }, 
     }); 
     }); 
</script> 

HTMLフォーム：

<form onsubmit="return false"> 
{% csrf_token %} 
<input type="text" name="post_id" value= {{post.pk}} hidden="hidden"> 
<button type="submit" name="btnLike" class="btn btn-info">Like</button> 
</form> 

私は私が恐ろしく間違って何かをやっている知っているが、私は何を知りません。

Answer 1

セレクタ$('#btnLike')が正しくない、id="btnLike"のボタンを探しています。

これを試してみてください：

<button type="submit" id="btnLike" class="btn btn-info">Like</button> 

問題は、URLのあなたの値である

$(document).ready(function(){ 
    //your code goes here 
}); 

Answer 2

にあなたがHTMLでjQueryライブラリをロードし、すべてのあなたのjQueryのコードをラップすることを確認してください。 IPアドレスを削除します。相対的なアドレッシングを使用する。あなたのボタンにもidを入れてください。参考のため

$('#btnLike').on('click', function(event) { 
alert('ok'); 

    $.ajax({ 
    type: 'POST', 
    url: 'backend/website/like', /* for testig */ 
    data: { 
    csrfmiddlewaretoken: {% csrf_token %}, 
    post_id = $('#post_id').val(), 
    }, 
    }); 
    }); 

ボタンのHTML

<form onsubmit="return false"> 
{% csrf_token %} 
<input type="text" name="post_id" value= {{post.pk}} hidden="hidden"> 
<button type="submit" id="btnLike" class="btn btn-info">Like</button> 
</form> 

Answer 3

：あなたは（YTSさんのコメントどおり）フォームをシリアル化しているなら、あなたは明示的にあなたのAJAXコードでcsrf_tokenを含める必要はありません。

csrfmiddlewaretoken: '{{ csrf_token }}', 

はない

csrfmiddlewaretoken: '{% csrf_token %}', 

テンプレート変数{{ csrf_token }}は、例えば、トークン文字列を出力します。あなただけのAJAXを使用していた場合でも、その後のようなトークンを渡します。

'mytoken123456789' 

タグ{% csrf_token %}は隠しHTML入力要素を出力し、一方：

<input type="hidden" name='csrfmiddlewaretoken' value='mytoken123456789' /> 

この入力要素ではなく、トークン文字列を解析しようとしているので、あなたが上記のコメントで言及構文エラーがあります。