我在左侧显示了我的子类别的链接列表。我想发生的是，当用户单击子类别时，它将在右侧显示数据/内容。
我使用的是基于类的视图，因此我的初始页面是一个ListView（subcategory_list.html），其中显示了所有Subcategory对象。
因此，每个Subcategory对象都有一个DetailView（subcategory_detail.html）。
我想基于单击了“子类别”链接来显示DetailView模板（在同一页面上）。
如果我理解正确，则必须使用{％include％}标签和一些AJAX ？？？
如何停止浏览器访问新URL？
谢谢！
views.py
class SubcategoryListView(ListView):
model = Subcategory
template_name = 'categories/subcategory_list.html'
class SubcategoryDetailView(DetailView):
model = Subcategory
template_name = 'categories/subcategory_detail.html'
def get_context_data(self, **kwargs):
context = super(SubcategoryDetailView, self).get_context_data(**kwargs)
context['tasks'] = Task.objects.filter(subcategory=self.object)
context['contractors'] = ContractorProfile.objects.filter(subcategory=self.object)
return context
subcategory_list.html
{% extends 'base.html' %}
{% block content %}
<div class="container">
<div class="col-md-3">
{% for subcategory in object_list %}
<p><a href="{% url 'categories:subcategory' subcategory.id %}">{{ subcategory.title }}</a></p>
{% endfor %}
</div>
<div class="col-md-9">
{% include 'categories/subcategory_detail.html' %}
</div>
</div>
{% endblock %}
subcategory_detail.html
{% extends 'base.html' %}
{% block content %}
<div class="container">
<h3>Subcategory: {{ object.title }}</h3>
{% if user.is_authenticated%}
<div class="row">
{% for task in tasks %}
<div class="thumbnail col-md-3">
<img src="#" class="img-circle" />
<div class="caption">
<p>Title: {{ task.title }}</p>
<p>Description: {{ task.description }}</p>
<p>Special Instructions: {{ task.special_instructions }}</p>
<p>Posted by: {{ task.user.username }}</p>
</div>
</div>
{% cycle '' '' '' '</div><div class="row">' %}
{% endfor %}
{% endif %}
</div>
</div>
<div class="container">
<h3>Contractors Available:</h3>
<div class="row">
{% for contractor in contractors %}
<div class="thumbnail col-md-3">
<img src="#" class="img-circle" />
<div class="caption">
<p>Name: {{ contractor.contractor.username }}</p>
<p>Rating: {{ contractor.rating }}</p>
{% if contractor.contractor.is_online == True %}
<span class="glyphicon glyphicon-fire"></span> <span>Online Now</span>
{% endif %}
</div>
</div>
{% cycle '' '' '' '</div><div class="row">' %}
{% endfor %}
</div>
{% endblock %}
urls.py
urlpatterns = [
url(r'^subcategories/$', views.SubcategoryListView.as_view(), name='subcategories'),
url(r'^subcategories/(?P<pk>\d+)/$', views.SubcategoryDetailView.as_view(), name='subcategory'),
]
并非通过刷新页面来完成的所有工作都需要使用服务器内容，而是需要使用JavaScript。在这种情况下，您想将HTML内容（由Django提供）注入您的页面。
我要在这里使用jQuery。
首先，您要标识需要在其中注入内容的div（为了使JavaScript能够引用它）和div。
另外，删除{% include %}标签（或让标签呈现用户加载页面时要呈现的内容）。
（在subcategory_list.html（应重命名subcategory.html）中）：
<div class="container subcategory_list">
<div class="col-md-3">
{% for subcategory in object_list %}
<p><a href="{% url 'categories:subcategory' subcategory.id %}">{{ subcategory.title }}</a></p>
{% endfor %}
</div>
<div class="col-md-9" id="subcategory_detail">
{% include 'categories/subcategory_detail.html' %}
</div>
</div>
然后，您需要告知a href，不要加载页面，而是让ajax调用发生。
<script type="text/javascript">
$(function() { // shortcut for onDocumentReady
// When you click an "a" tag who is child of an item with class "subcategory_list"…
$('.subcategory_list>a').click(function() {
var href = $(this).attr('href');
// Use this if you want to add a loading gif or something similar
// $('#subcategory_detail').html(my_cool_loading_gif_html)
$.get(href, {
success: function(response) {
// If the ajax call is successful, take the response and inject in div with id "subcategory_detail"
$('#subcategory_detail').html(response)
},
error: function(response) {
// Handle ajax errors here
}
})
return false;
});
});
</script>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句