Django, Ajax и jQuery - форма публикации без перезагрузки страницы и распечатка сообщения "succes" для пользователя

Question

Я бы хотел попросить вас о помощи. Я хотел создать простую систему голосования. Мне как-то удалось. У меня есть простая кнопка «ВВЕРХ», которая отправляет форму с простым +1 целым числом для оценки значения сообщения. Сейчас у него много проблем, но я буду бороться с ними позже.

Прямо сейчас я хотел добавить этот счет +1 без обновления страницы (как большинство современных веб-сайтов). Я сделал свой поиск в Google, и я придумал это: https://www.codingforentrepreneurs.com/blog/ajaxify-django-forms/ Я должен сказать, что он работает довольно хорошо, даже с моим нулевым знанием о js, jquery или ajax.

Моя проблема в том, что javascript добавляет это +1, но это также дает мне некоторые ошибки, которые я не могу gr asp:

responseText: "TypeError at /viewquestion/6/voteup\n__init__() missing 1 required positional argument: 'data'\n\nRequest Method: POST\nRequest URL: http://127.0.0.1:8000/viewquestion/6/voteup\nDjango Version: 3.0.4\n

Я хотел бы либо избавиться из них или понять природу их: P

И моя вторая или главная проблема заключается в том. Голосование работает, но оценка не меняется из-за курса, страница не перезагружается. И я также не могу напечатать сообщение «Успешное голосование» для пользователя, потому что веб-сайт не обновляется.

Мне достаточно простого сообщения пользователю «Успешное голосование». В лучшем случае сценарий будет обновляться немедленно, но я не знаю, насколько это усложнит ситуацию.

Не могли бы вы помочь мне с этим или указать правильное направление? Мне довольно сложно придумать даже идеи гугля, так как я ничего не знаю в js / ajax или jquery.

Вот что я смог сделать прямо сейчас:

base. html:

<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script>
// using jQuery
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

var csrftoken = getCookie('csrftoken');

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});
</script>

views.py:

@login_required()
def questionvoteup(request, question_pk):
    question = get_object_or_404(Question, pk=question_pk, user=request.user)
    if request.is_ajax() and request.method == "POST":
        question.votesscore += 1
        question.amountofvotes += 1
        question.save()
        messages.success(request, 'Thank you for your vote!')
        return JsonResponse()
    else:
        return HttpResponse(400, 'Invalid form')

home. html:

<ul>
    {% for question in allquestionswithanswers %}
    <li>
        {{ question }} Score: {{ question.votesscore }} {{ question.user }}

        {% if messages %}

        {% for message in messages %}
        {{ message }}
        {% endfor %}

        {% endif %}

        <br><br>

        <form class='my-ajax-form' method='POST' action='.' data-url="{% url 'questionvoteup' question.id %}" >
        {% csrf_token %}
        <button type='submit'>UP</button>
        </form>



        {% for answer in question.answer_set.all %}
            {{ answer }}<br>
        {% endfor %}
    </li>
    {% endfor %}

</ul>

Спасибо.

Answer 1

JsonResponse : первый параметр data должен быть экземпляром dict.

Ваше мнение:

def questionvoteup(request, question_pk):
    question = get_object_or_404(Question, pk=question_pk, user=request.user)
    if request.is_ajax() and request.method == "POST":
        question.votesscore += 1
        question.amountofvotes += 1
        question.save()
        data = {
            "msg": 'Thank you for your vote!'
        }
        return JsonResponse(data)
    else:
        return HttpResponse(400, 'Invalid form')

Чем в вашем шаблоне:

$(".my-ajax-form").submit(function(e) {
    e.preventDefault(); // avoid to execute the actual submit of the form.
    var form = $(this);
    var url = form.data('url');

    $.post(url).done(function(data) {
        alert(data.msg); // get your response data

    });

});