Django - передать элемент списка id/pk в представление с помощью jQuery ajax

64
9

Вот мой код, сокращенный для краткости.

Шаблон HTML

{% for question in questions %}
<div class="upvote"></div>
{% endfor %}

# lots of code later...

<script>
$(".upvote").click(function(){
$.ajax({
type: "POST",
url: "{% url 'upvote_for_question' %}",
data: {
'question': question
},
}
})
})
</script>

Мой элемент <div class="upvote"> - это кнопка upvote для вопроса (подумайте о кнопке). Как показывает код, каждый question в question_list имеет кнопку upvote.

Мой вопрос: когда пользователь нажимает кнопку "вверх", как передать связанный question pk/id в представление?

спросил(а) 2020-04-02T14:33:28+03:00 1 год, 2 месяца назад
1
Решение
78

Одним из способов было бы определить url для upvote:

url(r'^questions/(?P<question_id>\w+)/upvote', views.question_upvote, name='question_upvote')

Затем используйте функцию обратного URL-кода в шаблоне и передайте url в атрибуте data, например:

{% for question in questions %}
<div class="upvote"
id="button-{{ question.pk}}"
data-href="{% url 'question_upvote' question.pk %}">{{ question.upvotes }}
</div>
{% endfor %}

И измените ваш jQuery, чтобы получить URL-адрес из атрибута data-href плюс добавить токен CSRF, иначе POST завершится с статусом 403. Что-то вроде:

$(".upvote").click(function(){
var postData = {csrfmiddlewaretoken: '{{ csrf_token }}'}
$.ajax({
type: "POST",
url: $(this).attr("data-href"),
data: postData,
success: function(new_number_of_upvotes) {
$(this).html(new_number_of_upvotes)
}
})
})

Обновленный вид, отражающий эти изменения, будет чем-то в смысле:

def question_upvote(request, question_id):
if request.is_ajax() and request.method == 'POST':
question = get_object_or_404(Questions, pk=question_id)
question.upvotes += 1
question.save()
return HttpResponse(question.upvotes)
else:
return HttpResponseRedirect('/')

Я не проверял это, но я думаю, это должно сработать.

ответил(а) 2020-04-02T14:44:34.914113+03:00 1 год, 2 месяца назад
78

Сначала вы можете дать каждому div уникальный id:

{% for question in questions %}
<div class="upvote" id="button-{{ question.pk}}"></div>
{% endfor %}

Затем передайте, что в данных сообщения:

data: {
'question': $(this).attr('id')
},

ответил(а) 2020-04-02T14:33:28+03:00 1 год, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема