我将ajax添加到我的投票按钮中，它正在工作，但它不会在不刷新的情况下更新投票数

Question

我使用Django，我构建了我的投票系统并添加了ajax，以避免在单击"UP"或"DOWN"后刷新我的页面。它正在工作(它更新我的按钮而不实际刷新页面(。但是我的投票数字也包含在代码的同一部分中，但它们不会与按钮一起更新。要查看投票数的变化，我实际上需要刷新整个网站(f5(。

为什么会发生这种情况，我该如何解决？

我的投票部分：

Vote Up: {{ total_voteup }} Vote Down: {{ total_votedown }}
{% if is_voteup %}
<form method='POST' action="{% url 'voteup' %}">
{% csrf_token %}
<button type='submit' id="voteup" name="question_id" value="{{ question.id }}">Revert /</button>
</form>
{% elif is_votedown %}
<form method='POST' action="{% url 'votedown' %}">
{% csrf_token %}
<button type='submit' id="votedown" name="question_id" value="{{ question.id }}">Revert /</button>
</form>
{% else %}
<form method='POST' action="{% url 'voteup' %}">
{% csrf_token %}
<button type='submit' id="voteup" name="question_id" value="{{ question.id }}">/</button>
</form>
<form method='POST' action="{% url 'votedown' %}">
{% csrf_token %}
<button type='submit' id="votedown" name="question_id" value="{{ question.id }}">/</button>
</form>
{% endif %}

我的 js 脚本：

<script type="text/javascript">
$(document).ready(function(event){
$(document).on('click', '#voteup', function(event){
event.preventDefault();
var pk = $(this).attr('value');
$.ajax({
type: 'POST',
url: '{% url "voteup" %}',
data: {'question_id': pk, 'csrfmiddlewaretoken': '{{ csrf_token }}' },
dataType: 'json',
success: function(response){
$('#voting_section').html(response['form'])
console.log($('#voting_section').html(response['form']));
},
error: function(rs, e){
console.log(rs.responseText);
},
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function(event){
$(document).on('click', '#votedown', function(event){
event.preventDefault();
var pk = $(this).attr('value');
$.ajax({
type: 'POST',
url: '{% url "votedown" %}',
data: {'question_id': pk, 'csrfmiddlewaretoken': '{{ csrf_token }}' },
dataType: 'json',
success: function(response){
$('#voting_section').html(response['form'])
console.log($('#voting_section').html(response['form']));
},
error: function(rs, e){
console.log(rs.responseText);
},
});
});
});
</script>

我对js或ajax了解不多。

编辑

urls.py：

urlpatterns = [
path('admin/', admin.site.urls),
# Authorization
path('signup/', views.signupuser, name='signupuser'),
path('login/', views.loginuser, name='loginuser'),
path('logout/', views.logoutuser, name='logoutuser'),
# User Page
path('dashboard/', views.dashboard, name='dashboard'),
path('askaquestion/', views.askaquestion, name='askaquestion'),
path('viewquestion/<int:question_pk>', views.viewquestion, name='viewquestion'),
path('viewquestion/<int:question_pk>/answered', views.questionanswered, name='questionanswered'),
path('viewquestion/<int:question_pk>/delete', views.deletequestion, name='deletequestion'),
path('viewanswer/<int:answer_pk>', views.viewanswer, name='viewanswer'),
path('appreciatedanswer/<int:answer_pk>', views.appreciatedanswer, name='appreciatedanswer'),
path('viewanswer/<int:answer_pk>/delete', views.deleteanswer, name='deleteanswer'),
path('voteup/', views.voteup, name='voteup'),
path('votedown/', views.votedown, name='votedown'),
path('questiondetails/<int:question_pk>', views.questiondetails, name='questiondetails'),
path('', views.home, name='home'),
]

Answer 1

ajax 允许您指定一个元素作为响应的目标。你可以让 ajax 将响应直接放在 total_voteup/down 元素中，而不是中继成功函数。像这样：

$.ajax({
type: 'POST',
url: '{% url "votedown" %}',
data: {'question_id': pk, 'csrfmiddlewaretoken': '{{ csrf_token }}' },
dataType: 'json',
target: 'total_voteup'
}