Django网页搜索表单无法显示的问题求助

问题描述 #

在Django网页中尝试显示搜索表单，已编写搜索视图函数、搜索表单及相关模板代码，但表单完全无法在页面上显示，仅能看到base.html模板内容。已禁用所有可能干扰的CSS，确认base.html无影响，且表单已正确传递至视图函数和模板。

相关代码 #

搜索模板（song_search.html） #

{% extends 'base.html' %}

{%block title%}
    {% if form.is_valid and search_text%}
        Search Results for "{{ search_text }}"
    {% else %}
        UrMix Search
    {% endif %}
{% endblock %}
{% block content %}
<h2> Search for Songs </h2>
<form method="GET" action="{% url 'song_search' %}">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" class="btn btn-primary">Search</button>
</form>
{% if form.is_valid and search_text %}
<h3> Search results for <em> {{search_text}}</em></h3>
<ul class = "list-group">
    {% for song in songs%}
    <li class="list-group-item">
        <span class="text-info">Name: </span> <a href="{%url 'song_detail' song.pk%}"> {{song}}</a>
        <br/>
    </li>
    {% empty %}
        <li class = "list-group-item">No result</li>
    {% endfor %}
</ul>
{% endif %}
{% endblock %}

搜索视图函数 #

def song_search(request):
    search_text = request.GET.get("search", "")
    form = SearchForm(request.GET or None)
    songs = set()

    if form.is_valid() and form.cleaned_data["search"]:
        search = form.cleaned_data['search']
        search_in = form.cleaned_data.get("search_in") or "name"

        if search_in == "name":
            songs = Song.objects.filter(name__icontains=search)

        elif search_in == "album":
            song_al = Song.objects.filter(song_album__icontains=search)

            for song in song_al:
                related_songs = song.song_album.all()
                songs.add(related_songs)

        elif search_in == "genre":
            song_g = Song.objects.filter(song_genre__icontains=search)

            for song in song_g:
                related_songs = song.song_genre.all()
                songs.add(related_songs)

        elif search_in == "artist":
            song_art = Song.objects.filter(song_aritst__icontains=search)

            for song in song_art:
                related_songs = song.song_artist.all()
                songs.add(related_songs)
    print(form.as_p())
    return render(request, "song_search.html", {"form": form, "search_text": search_text, "songs": songs})

表单代码 #

class SearchForm(forms.Form):
    search = forms.CharField(required=False, min_length=1)
    search_in = forms.ChoiceField(required=False,
                                  choices=(
                                      ("name", "Name"),
                                      ("album", "Album"),
                                      ("genre", "Genre"),
                                      ("artist", "Artist")
                                  ))

base.html #

<!doctype html>

{% load static %}
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <title> UrMix </title>
    <link rel = "stylesheet" href = "{% static 'css/main.css' %}">
  </head>

  <body>
    <nav class = "navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
      <a class = "navbar-brand"> <img src = "{% static 'images/urmixlogo.png'%}"></a>

      <button class = "navbar-toggler" type = "button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Navigation">
        <span class = "navbar-toggler-icon"></span>
      </button>
      <div class = "collapse navbar-collapse" id="navbarSupportedContent">
        <ul class = "navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="/UrMix/home">Home<span class="sr-only">(current)</span></a>
            <form action="{%url 'song_search' %}" class="form-inline my2 my-lg-0">
              <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="search" value="{{search_text}}" minlength="1">
              <button class="btn btn-outline-success my2 my-sm-0" type="submit">Search</button>
            </form>
          </li>


        </ul>

      </div>
    </nav>
  </body>
</html>

问题解决步骤 #

1. 修复base.html的内容块缺失
   子模板中使用了{% block content %}，但base.html未定义该块，导致子模板内容无法渲染。修改base.html，在</nav>标签后添加内容块：

   </nav>
   <!-- 添加以下内容 -->
   <div class="container mt-4">
       {% block content %}{% endblock %}
   </div>
   

2. 移除GET请求的CSRF令牌
   GET请求不需要{% csrf_token %}，直接删除模板中该行代码即可。

3. 修正视图中的拼写错误
   视图函数中song_aritst__icontains=search存在拼写错误，改为song_artist__icontains=search。

4. 修复集合处理逻辑
   原代码用集合存储查询结果会导致遍历错误，将songs = set()改为songs = []，并把songs.add(related_songs)替换为songs.extend(related_songs)。

内容的提问来源于stack exchange，提问作者LucidCynicism