如何让页面在事件发生后重定向到同一页面
how to make the page redirects to the same page after the event occured
我正在尝试在我的网站上添加赞成票和反对票功能。但是有一个我不喜欢的特殊行为,那就是每当用户单击按钮时,他不应该被重定向到另一个页面,而是应该留在同一页面上。
点击赞成按钮后会发生什么,它会转到我不想要的 url http://localhost:8001/upvote/2/
。我希望它保留在 http://localhost:8001/view-supplier/
的同一页面上
models.py
class User(AbstractBaseUser, PermissionsMixin):
email = models.EmailField(max_length=254, unique=True)
# CUSTOM USER FIELDS
firstname = models.CharField(max_length=30)
lastname = models.CharField(max_length=30)
upvotes = models.IntegerField(default=0)
downvotes = models.IntegerField(default=0)
objects = UserManager()
def get_absolute_url(self):
return "/users/%i/" % (self.pk)
def get_email(self):
return self.email
views.py
def Viewsupplier(request):
title = "All Suppliers"
suppliers = User.objects.filter(user_type__is_supplier=True)
context = {"suppliers":suppliers, "title":title}
return render(request, 'core/view-suppliers.html', context)
@login_required
def upvote(request, pk):
supplier_vote = get_object_or_404(User, id=pk)
supplier_vote.upvotes += 1
supplier_vote.save()
upvote_count = supplier_vote.upvotes
context = {"supplier_vote":supplier_vote, "upvote_count":upvote_count}
return render(request, "core/view-suppliers.html", context)
@login_required
def downvote(request, pk):
supplier_vote = get_object_or_404(User, id=pk)
supplier_vote.downvotes -= 1
supplier_vote.save()
downvote_count = supplier_vote.downvotes
context = {"supplier_vote":supplier_vote, "downvote_count":downvote_count}
return render(request, "core/view-suppliers.html", context)
urls.py
from django.urls import path
from . import views
urlpatterns = [
path('upvote/<int:pk>/', views.upvote, name='upvote'),
path('downvote/<int:pk>/', views.downvote, name='downvote'),
]
查看-supplier.html
<table class="table table-borderless table-data3">
<thead>
<tr>
<th>No</th>
<th>Country</th>
<th>Votes</th>
</tr>
</thead>
<tbody>
{% for supplier in suppliers %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{supplier.country}}</td>
<td>
<div class="table-data-feature">
<a href="{% url 'upvote' supplier.id %}" class="m-r-10">
<button class="item" data-toggle="tooltip" data-placement="top" title="Like">
<i class="zmdi zmdi-thumb-up"></i>{{upvote_count}}</button>
</a>
<a href="{% url 'downvote' supplier.id %}">
<button class="item" data-toggle="tooltip" data-placement="top" title="Dislike">
<i class="zmdi zmdi-thumb-down"></i>{{downvote_count}}</button>
</a>
</div>
</td>
</tr>
{% empty %}
<tr><td class="text-center p-5" colspan="7"><h4>No supplier available</h4></td></tr>
{% endfor %}
</tbody>
</table>
您需要实现一个 API(应用程序编程接口)以异步发送赞成票和反对票。 Django REST framework 是创建您自己的 API 的方法。您可以在 YouTube 上观看有关该主题的数小时视频教程。 Django REST 框架的文档非常好,也很容易阅读。 Django 是一个服务器端网络框架,这意味着它只能在您提交给服务器时为您提供帮助。您绝对可以重新加载同一页面:
return HttpResponseRedirect(reverse('<app_name>:<url_name>'))
但是,会有中断。因此,处理此类行为的推荐方法是使用 JavaScript 的 API 对 REST 框架进行异步调用,例如 Fetch API。
如果您可能出于对学习异步编码的错误恐惧,决定以老式方式将数据发送到您的服务器,您始终可以使用您的赞成票和反对票来提交用户数据并更新计数。然后,在您的 view_supplier 视图中,您需要获取更新的视图计数并将其传递给上下文。因此,您的赞成票视图会更改赞成票计数并触发 Viewsupplier 视图。然后,在 ViewSupplier 视图中,您获取计数并将其添加到上下文
# in your template
<a href="{% url 'upvote' supplier.id %}" class="m-r-10">
<button class="item" data-toggle="tooltip" data-placement="top" title="Like">
<i class="zmdi zmdi-thumb-up"></i>{{upvote_count}}</button>
</a>
# in your view
def Viewsupplier(request):
title = "All Suppliers"
suppliers = User.objects.filter(user_type__is_supplier=True)
# Get the updated count:
suppliers_votes_count = {}
for supplier in suppliers:
upvote_count = supplier.upvotes
downvote_count = supplier.upvotes
supplier_count = {supplier: {'upvote': upvote_count, 'downvote': downvote_count } }
suppliers_votes_count.update(supplier_count)
context = {"suppliers":suppliers, "title":title, "suppliers_votes_count": suppliers_votes_count }
return render(request, 'core/view-suppliers.html', context)
@login_required
def upvote(request, pk):
supplier_vote = get_object_or_404(User, id=pk)
supplier_vote.upvotes += 1
supplier_vote.save()
upvote_count = supplier_vote.upvotes
context = {"supplier_vote":supplier_vote, "upvote_count":upvote_count}
return HttpResponseRedirect(reverse('core:view_supplier'))
这可以通过使用 AJAX 轻松实现。
与其将 supplier_id
作为 URL 的一部分提供,不如将 AJAX 中的 supplier_id
发送到您的 Django Upvote 视图。你可以这样做。
HTML:
<button id="{{ supplier_id }}" class="item upvote" data-toggle="tooltip" data-placement="top" title="Like">
<i class="zmdi zmdi-thumb-up"></i>{{upvote_count}}
</button>
使用 Javascript 从按钮点击事件中提取 supplier_id
。
JavaScript:
$('.upvote').on('click', function () {
var supp_id = $(this).attr('id');
$ajax({
type: 'POST',
url: '/upvote/',
data: {
supplier_id: supplier_id,
},
success: function (data) {
if (data.status == 'success') {
/* Your upvote logic like updating the color of button or showing Unlike etc.,*/
}
}
});
});
将 Django 中的 url 模式 urls.py 更改为
urlpatterns = [path('upvote/', views.upvote, name='upvote'),
Views.py
def upvote(request):
if request.method == 'POST':
supplier_id = request.POST['supplier_id']
# Your DB update logic goes here....
return JsonResponse({'status': 'success'})
else:
return JsonResponse({'status': 'Error'})
同样,您可以对 downvote
执行相同的操作。
以下是我实现此目标的方法:
首先我会用简单的形式处理 upvotes/downvotes:
<form method="POST" action="{% url 'view-supplier' %}"> //upvote form
{% csrf_token %}
<input type="hidden" name="upvote-button">
<button type="submit" style="width:100%">Upvote Button</button>
</form>
<form method="POST" action="{% url 'view-supplier' %}"> // downvote form
{% csrf_token %}
<input type="hidden" name="downvote-button">
<button type="submit" style="width:100%">Downvote Button</button>
</form>
然后我将视图设置为:
def supplierView(request):
supplier_vote = get_object_or_404(User, id=pk)
if 'upvote-button' in request.POST:
supplier_vote.upvotes += 1
supplier_vote.save()
upvote_count = supplier_vote.upvotes
elif 'downvote-button' in request.POST:
supplier_vote.downvotes -= 1
supplier_vote.save()
downvote_count = supplier_vote.downvotes
else:
downvote_count = supplier_vote.downvotes
upvote_count = supplier_vote.upvotes
context = {
'upvote_count': upvote_count,
'downvote_count': upvote_count,
}
return render(request, 'main/view-suppliers.html', context)
这样当有人点击赞成按钮时,他们会被重定向到同一个视图,然后处理添加赞成票和更新上下文。
如果 view-supplier
是详细视图,您还必须将 PK 传递给视图。
我正在尝试在我的网站上添加赞成票和反对票功能。但是有一个我不喜欢的特殊行为,那就是每当用户单击按钮时,他不应该被重定向到另一个页面,而是应该留在同一页面上。
点击赞成按钮后会发生什么,它会转到我不想要的 url http://localhost:8001/upvote/2/
。我希望它保留在 http://localhost:8001/view-supplier/
models.py
class User(AbstractBaseUser, PermissionsMixin):
email = models.EmailField(max_length=254, unique=True)
# CUSTOM USER FIELDS
firstname = models.CharField(max_length=30)
lastname = models.CharField(max_length=30)
upvotes = models.IntegerField(default=0)
downvotes = models.IntegerField(default=0)
objects = UserManager()
def get_absolute_url(self):
return "/users/%i/" % (self.pk)
def get_email(self):
return self.email
views.py
def Viewsupplier(request):
title = "All Suppliers"
suppliers = User.objects.filter(user_type__is_supplier=True)
context = {"suppliers":suppliers, "title":title}
return render(request, 'core/view-suppliers.html', context)
@login_required
def upvote(request, pk):
supplier_vote = get_object_or_404(User, id=pk)
supplier_vote.upvotes += 1
supplier_vote.save()
upvote_count = supplier_vote.upvotes
context = {"supplier_vote":supplier_vote, "upvote_count":upvote_count}
return render(request, "core/view-suppliers.html", context)
@login_required
def downvote(request, pk):
supplier_vote = get_object_or_404(User, id=pk)
supplier_vote.downvotes -= 1
supplier_vote.save()
downvote_count = supplier_vote.downvotes
context = {"supplier_vote":supplier_vote, "downvote_count":downvote_count}
return render(request, "core/view-suppliers.html", context)
urls.py
from django.urls import path
from . import views
urlpatterns = [
path('upvote/<int:pk>/', views.upvote, name='upvote'),
path('downvote/<int:pk>/', views.downvote, name='downvote'),
]
查看-supplier.html
<table class="table table-borderless table-data3">
<thead>
<tr>
<th>No</th>
<th>Country</th>
<th>Votes</th>
</tr>
</thead>
<tbody>
{% for supplier in suppliers %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{supplier.country}}</td>
<td>
<div class="table-data-feature">
<a href="{% url 'upvote' supplier.id %}" class="m-r-10">
<button class="item" data-toggle="tooltip" data-placement="top" title="Like">
<i class="zmdi zmdi-thumb-up"></i>{{upvote_count}}</button>
</a>
<a href="{% url 'downvote' supplier.id %}">
<button class="item" data-toggle="tooltip" data-placement="top" title="Dislike">
<i class="zmdi zmdi-thumb-down"></i>{{downvote_count}}</button>
</a>
</div>
</td>
</tr>
{% empty %}
<tr><td class="text-center p-5" colspan="7"><h4>No supplier available</h4></td></tr>
{% endfor %}
</tbody>
</table>
您需要实现一个 API(应用程序编程接口)以异步发送赞成票和反对票。 Django REST framework 是创建您自己的 API 的方法。您可以在 YouTube 上观看有关该主题的数小时视频教程。 Django REST 框架的文档非常好,也很容易阅读。 Django 是一个服务器端网络框架,这意味着它只能在您提交给服务器时为您提供帮助。您绝对可以重新加载同一页面:
return HttpResponseRedirect(reverse('<app_name>:<url_name>'))
但是,会有中断。因此,处理此类行为的推荐方法是使用 JavaScript 的 API 对 REST 框架进行异步调用,例如 Fetch API。
如果您可能出于对学习异步编码的错误恐惧,决定以老式方式将数据发送到您的服务器,您始终可以使用您的赞成票和反对票来提交用户数据并更新计数。然后,在您的 view_supplier 视图中,您需要获取更新的视图计数并将其传递给上下文。因此,您的赞成票视图会更改赞成票计数并触发 Viewsupplier 视图。然后,在 ViewSupplier 视图中,您获取计数并将其添加到上下文
# in your template
<a href="{% url 'upvote' supplier.id %}" class="m-r-10">
<button class="item" data-toggle="tooltip" data-placement="top" title="Like">
<i class="zmdi zmdi-thumb-up"></i>{{upvote_count}}</button>
</a>
# in your view
def Viewsupplier(request):
title = "All Suppliers"
suppliers = User.objects.filter(user_type__is_supplier=True)
# Get the updated count:
suppliers_votes_count = {}
for supplier in suppliers:
upvote_count = supplier.upvotes
downvote_count = supplier.upvotes
supplier_count = {supplier: {'upvote': upvote_count, 'downvote': downvote_count } }
suppliers_votes_count.update(supplier_count)
context = {"suppliers":suppliers, "title":title, "suppliers_votes_count": suppliers_votes_count }
return render(request, 'core/view-suppliers.html', context)
@login_required
def upvote(request, pk):
supplier_vote = get_object_or_404(User, id=pk)
supplier_vote.upvotes += 1
supplier_vote.save()
upvote_count = supplier_vote.upvotes
context = {"supplier_vote":supplier_vote, "upvote_count":upvote_count}
return HttpResponseRedirect(reverse('core:view_supplier'))
这可以通过使用 AJAX 轻松实现。
与其将 supplier_id
作为 URL 的一部分提供,不如将 AJAX 中的 supplier_id
发送到您的 Django Upvote 视图。你可以这样做。
HTML:
<button id="{{ supplier_id }}" class="item upvote" data-toggle="tooltip" data-placement="top" title="Like">
<i class="zmdi zmdi-thumb-up"></i>{{upvote_count}}
</button>
使用 Javascript 从按钮点击事件中提取 supplier_id
。
JavaScript:
$('.upvote').on('click', function () {
var supp_id = $(this).attr('id');
$ajax({
type: 'POST',
url: '/upvote/',
data: {
supplier_id: supplier_id,
},
success: function (data) {
if (data.status == 'success') {
/* Your upvote logic like updating the color of button or showing Unlike etc.,*/
}
}
});
});
将 Django 中的 url 模式 urls.py 更改为
urlpatterns = [path('upvote/', views.upvote, name='upvote'),
Views.py
def upvote(request):
if request.method == 'POST':
supplier_id = request.POST['supplier_id']
# Your DB update logic goes here....
return JsonResponse({'status': 'success'})
else:
return JsonResponse({'status': 'Error'})
同样,您可以对 downvote
执行相同的操作。
以下是我实现此目标的方法:
首先我会用简单的形式处理 upvotes/downvotes:
<form method="POST" action="{% url 'view-supplier' %}"> //upvote form
{% csrf_token %}
<input type="hidden" name="upvote-button">
<button type="submit" style="width:100%">Upvote Button</button>
</form>
<form method="POST" action="{% url 'view-supplier' %}"> // downvote form
{% csrf_token %}
<input type="hidden" name="downvote-button">
<button type="submit" style="width:100%">Downvote Button</button>
</form>
然后我将视图设置为:
def supplierView(request):
supplier_vote = get_object_or_404(User, id=pk)
if 'upvote-button' in request.POST:
supplier_vote.upvotes += 1
supplier_vote.save()
upvote_count = supplier_vote.upvotes
elif 'downvote-button' in request.POST:
supplier_vote.downvotes -= 1
supplier_vote.save()
downvote_count = supplier_vote.downvotes
else:
downvote_count = supplier_vote.downvotes
upvote_count = supplier_vote.upvotes
context = {
'upvote_count': upvote_count,
'downvote_count': upvote_count,
}
return render(request, 'main/view-suppliers.html', context)
这样当有人点击赞成按钮时,他们会被重定向到同一个视图,然后处理添加赞成票和更新上下文。
如果 view-supplier
是详细视图,您还必须将 PK 传递给视图。