Ajax - Ajax-Code nicht ausgeführt

Question

Ich lerne Ajax und ich stieß auf ein kleines Problem.

Ich versuche, eine POST-Anfrage an ein Django-Backend mit Ajax zu senden. AUCH die Warnung wird nicht auf dem Bildschirm angezeigt. Und wie ich in der Test-Django-Server-Shell sehe, sendet es nicht einmal die POST-Anfrage.

Der Code:

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

Das HTML-Formular:

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

Ich weiß, ich mache etwas schief, aber ich weiß nicht, was.

Answer 1

Ihr Selektor $('#btnLike') ist nicht korrekt, es sucht nach einer Schaltfläche mit id="btnLike".

Versuchen Sie folgendes:

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

Bitte stellen Sie sicher, dass Sie jQuery-Bibliothek in Ihre HTML laden und wickeln Sie alle Ihre jQuery-Code in

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

Answer 2

das Problem mit dem Wert für URL ist. Entferne die IP-Adresse. Verwenden Sie die relative Adressierung. Setzen Sie auch ID auf Ihre Schaltfläche.

$('#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(), 
    }, 
    }); 
    }); 

Knopf 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

Zum Vergleich: Wenn Sie das Formular sind Serialisierung (per Kommentar yts ist), dann werden Sie nicht explizit schließen die csrf_token in Ihrer AJAX-Code müssen. Aber wenn Sie wurden nur mit AJAX, übergeben Sie dann in dem Token wie:

csrfmiddlewaretoken: '{{ csrf_token }}', 

nicht

csrfmiddlewaretoken: '{% csrf_token %}', 

Die Template-Variable {{ csrf_token }} gibt das Token-String, z. B.

'mytoken123456789' 

während des Tages {% csrf_token %} gibt ein verstecktes HTML-Eingabeelement:

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

Die Syntaxfehler Sie oben im Kommentar erwähnen sind, weil es versucht, dieses Eingabeelement zu analysieren, anstatt der Token-String.