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中，我有第一个搜索栏工作，但作为文本。我有以下简单的bootstrap下拉菜单。如果使用ajax或jquery是最好的，我对此持开放态度。

Answer 1

你需要Ajax才能做到这一点。

按照this教程为您提供帮助。

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

当像这样调用Ajax网址时

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

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

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

通过这种方式，您可以调用视图（或者只是这种情况下的函数）将您需要的信息发送到模板。

稍后，使用jquery，您可以使用其类似

的ID更改元素的html

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

您还可以附加元素，只需使用 .append 更改 .html 即可。区别在于.html用您给出的代码替换了您所拥有的内容，而.apend只会将该代码添加到您拥有的代码中。

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

1 个答案: