Problem when sending data AJAX, JQUERY?

Question

JavaScript

I want to send two data to the server: "username", "comment".
Here is the code:

$('#formname').submit(function(e){

    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: '{% url "leave_comment" data.pk %}',
        headers: {'X-CSRFToken': '{{ csrf_token }}'},
        data: {'comment': $('#comment'), 'username': $('#username')},
        dataType: 'json',
        success: function(data) {...}

Then the browser simply displays "Oops, there were problems loading this page"
But if you specify only "comment" in "data", then everything works

...
data: $('#comment'),
...

I tried to wrap it in an array, a tuple, then it doesn't work either.
Help!

Answer 1

You need to look at what's in the variables.
If you have already determined that the matter is in username - so look what is there.

var kk = {'username': $('#username')};
debugger; // автоматически ставит точку останова, можно ковырять в консоли
console.log(kk);

Most likely, you want to receive values ​​or text, it was done something like this $('#comment').text() or $('#username').val(); But to answer for sure, you need to work correctly with the developer tools in the browser. Also, you need to go to the network tab and see what kind of request goes to the server, what model is in this request and what answer comes