Django 1.10 使用下拉菜单过滤查询

Question

我有一个数据库，里面有一堆照片和他们拍摄的国家。这是我正在制作的这个网站上的相册。目前，我将所有图片放在一页上。我喜欢这个。我希望现在能够搜索来自某个国家或城市的所有图片。我的设计要求顶部有两个按钮（按国家/地区过滤，按城市过滤），当不使用过滤器时，下面显示数据库中的所有图片。我希望这些按钮分别成为所有国家和城市的下拉列表。当用户点击国家按钮时，会调用一个下拉菜单 - 使用引导程序。然后，他们可以单击所选国家/地区并查看按城市排序的所有图片。如果他们单击城市的下拉菜单，则会调用该城市的所有图片。如果他们选择国家/地区，则城市下拉列表仅显示该国家/地区的城市。现在，我不知道如何做到这一点。我可以填充下拉列表 - 但我得到了所有照片的国家 - 意味着重复。我该怎么做？

这是我的views.py：

def photo_album(request):
    queryset_list = Pictures.objects.all()
    query = request.GET.get("q")
    if query:
        queryset_list = queryset_list.filter(
            Q(pictures__icontains=query) |
            Q(picture_name__icontains=query) |
            Q(country__icontains=query) |
            Q(city__icontains=query)
        ).distinct()

    paginator = Paginator(queryset_list, 20)
    page_request_var = "page"
    page = request.GET.get(page_request_var)
    try:
        queryset = paginator.page(page)
    except PageNotAnInteger:
        # If page is not an integer, deliver first page.
        queryset = paginator.page(1)
    except EmptyPage:
        # If page is out of range (e.g. 9999), deliver last page of results.
        queryset = paginator.page(paginator.num_pages)

    context = {
        "object_list": queryset,
        "title": "List",
        "page_request_var": page_request_var,
    }
    return render(request, "in_country_pics/photo_album.html", context)

我的html：

<div class="container">
    <div class="photo-title">
        <h1>Welcome to Our Photo Album</h1>
    </div>
    <div class="col-sm-12 photoalbum-buttons">
        <form method="GET" action="" class="row">
            <div class="col-sm-6">
                <div class="input-group">
                    <input class="form-control" type="text" name="q" placeholder="Search Posts" value="{{ request.GET.q }}"/>
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">Search <i class="fa fa-search"></i></button>
                    </span>
                </div>
            </div>
        </form>

        <div class="dropdown form-actions">
            <button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="fa fa-search"></i>
                By Country
            </button>
            <ul class="dropdown-menu">
                {% for obj in object_list %}
                    <li ><a href="#">{{ obj.country }}</a></li>
                {% endfor %}
            </ul>
        </div>

        <div class="dropdown form-actions">
            <button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="fa fa-search"></i>
                By City
            </button>
            <ul class="dropdown-menu">
                {% for obj in object_list %}
                    <li><a href="#">{{ obj.city }}</a></li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <p id="photo-separator">______________________________________________</p>

    <div class="row photo-post">
        {% for obj in object_list %}
            <div class="col-sm-3">
                <div class="thumbnail">
                    <img src="{{ obj.pictures.url }}" class="img-responsive"/>
                    <div class="caption photo-description">
                        <p class="photo-location">{{obj.city}}, {{obj.country}}</p>
                        <p class="photo-time">Taken: Aug 04, 2016</p>
                         <p><a href="" class="btn btn-primary" type="button">View</a></p>
                    </div>
                </div>
            </div>
            {% if forloop.counter|divisibleby:4 %}
                <div class='col-sm-12'><hr/></div></div><div></div><div class='row'>
            {% endif %}
        {% endfor %}
    </div>

</div>

{% endblock %}

在 html 中，我有第一个搜索栏工作，但作为文本。我有以下简单的引导下拉菜单。如果最好使用 ajax 或 jquery，我对此持开放态度。

Answer 1

你需要 Ajax 来做到这一点。

关注this教程来帮助你。

您需要下载一个script（在教程中）来帮助您使用csrf_token，否则，当您提交表单时，您将收到与此令牌相关的 django 错误.

当像这样调用 Ajax url 时

$.ajax({
        url: "some path/", // endpoint

您必须在 urls.py 文件中创建该网址：

urlpatterns = [
    url(r'^path/$', views.your_view_name),
]

这样你就可以调用视图（或者在这种情况下只是一个函数）将你需要的信息发送到你的模板。

稍后，您可以使用 jquery 更改元素的 html，其 id 如下所示

$('#your_element_id').html("<p>your updated code goes here</p>");

你也可以附加元素集，只需将 .html 更改为 .append。 不同之处在于 .html 用你提供的代码替换你所拥有的，而 .apend 只用你所拥有的代码添加那个代码。