AJAX отправка формы в Django

Question

Я продолжаю получать «Not Ajax» в качестве ответа во время отправки формы. Мне не хватает чего-то маленького, но я его не вижу ...

class VideoLikeView(View):
    def post(self, request):
        if request.is_ajax():
            message = 'Ajax'
        else:
            message = 'Not Ajax'
        return HttpResponse(message)

Код AJAX выглядит так:

$(function () {
  $("#like-form").submit(function (event) {
      $.ajax({
            type: "POST",
            url: form.attr('action'),
            headers: {'X-CSRFToken': '{{ csrf_token }}'},
            data: {'pk': $(this).attr('value')},
            success: function(response) {
                alert('Video liked');
          },
          error: function(rs, e) {
                 alert(rs.responseText);
          }
        }
    });
});
});

И мой HTML:

<form id="like-form" action="{% url 'video-like' %}" method="post">
    {% csrf_token %}
    <input name="like"
           type="hidden"
           value="{{ video.id }}">
    <button type="submit">
        <span class="video-options ml-auto fas fa-heart fa-2x m-2"></span>
    </button>
</form>

Еще один вопрос, чтобы добавить к этому; как я могу использовать <input> в своей форме без использования <button>? Я хотел бы использовать иконки fontawesome, но мне кажется, что мне нужно использовать кнопку, чтобы отправить форму.

Answer 1

попробуйте изменить кнопку типа btn и добавить идентификатор для щелчка по событию: поскольку размещение кнопки отправки идет непосредственно на view.py без прохождения AJAX

<form id="like-form" action="{% url 'video-like' %}" method="post">
{% csrf_token %}
<input name="like"
       type="hidden"
       value="{{ video.id }}" id="id_pk">
<button type="button" id="id_btn">
    <span class="video-options ml-auto fas fa-heart fa-2x m-2"></span>
</button>

в вашем скрипте

$("#id_btn").click(function() {
  $.ajax({
        url:window.location.origin + 'your url'
        type: 'POST',
        data: {'pk':$(#id_pk).val(), 'accion':'guardar'},
        success: function (data) {
            console.log('success');

        },
        error: function(data) {
            console.log('failed');
        }
    });
});

и ваш view.py

def post(self, request):
    if 'guardar' in request.POST['accion']:
       print("")

Answer 2

Я нашел один ответ на inte rnet, который, кажется, работает, но я не понимаю, в чем была проблема. Похоже, требуется какой-то тип сериализации (?) ... В любом случае, вот что сработало:

var frm = $('#like-form');

frm.submit(function () {
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            console.log('success');

        },
        error: function(data) {
            console.log('failed');
        }
    });
    return false;
});

Хотелось бы услышать от людей, почему это работает, а не предыдущее ..