Django，使用 AJAX 过滤列表

Question

我正在尝试构建过滤器，在单击时过滤列表（选项值）。我知道还有其他类似的问题，但我似乎无法掌握它。

views.py

def gps_list(request):
    selected_programme = request.GET.get("selected_programme", None)

    gps = GoodPractice.objects.filter(
       id__in=ProgrammeList.objects.filter(programme__exact=selected_programme))
    print(gps)

    data = serializers.serialize("json", gps)
    return JsonResponse(data, safe=False)

这是我的脚本

<script>
    $("#programme").change(function () {
      event.preventDefault();
          var selected_programme = $(this).val();
          console.log(selected_programme);
      $.ajax({
        url: '{% url "gps_list" %}',
        data: {
          "selected_programme": selected_programme,
        },
        dataType: 'json',
        success: function(response) {
            alert(response);
          },
          error: function(response) {
            alert("oh no!");
          }
      });
    });
</script>

<div class="row">
            <div class="form-group col-sm-4">
            <fieldset>
            <legend>Select programme type:</legend>
              <label for="programme">Programme type: *<abbr title="required"></abbr></label>

              <form action="{% url 'gps' %}" method="get">
              <select class="form-control" id="programme" name="progr" size="6" multiple>
                {% for programme in progr %}
                  <option  value={{programme.id}} {% if programme.id in progr_selected %}selected{% endif %}>{{programme.name}}</option>
                {% endfor %}
              </select>
            </div>
            </div>

  {% autoescape off %}
  {% for gp in gps %}
  <div class="row">
    <div class="col-md-12">
      <h2 class="my-4">{{gp.name}}
        <small>{{gp.country}}</small>
      </h2>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="card mb-4">
        <div class="card-body">
          <h2 class="card-title">{{gp.programme_type}}</h2>
          <p class="card-text">{{gp.what}}</p>
          <a href="{% url 'gps' %}/{{gp.id}}" class="btn btn-primary">Read More &rarr;</a>
        </div>
      </div>
    </div>
  </div>
  </fieldset>
  {% endfor %}
  {% endautoescape %}
</div>

所以，我需要找到一种方法来过滤{{gp.name}}、{{gp.country}} {{gp.programme_type}} & {{gp.what}}.

目前print(gps) 工作正常。 拥有alert(response) 显示数据，但是当我使用alert(response.data) 时，我收到undefined。

Answer 1

fetchDataAndDisplay 函数未被调用的原因是因为您已将点击事件侦听器添加到 id 为“btn-primary”的元素，但按钮具有 “btn-primary”的类。

// Change the "#btn-primary" to ".btn-primary"
$(".btn-primary").click(function() {
    fetchDataAndDisplay();
});

你应该小心，因为所有带有“btn-primary”类的按钮都会触发这个动作。我建议使用与按钮操作相关的 ID，例如按钮的“gps-form-submit”而不是类。

您也可以直接将fetchDataAndDisplay 函数作为点击事件侦听器中的回调传递给$("#btn-primary").click(fetchDataAndDisplay)。

至于实际处理您的 AJAX 调用的内容，您需要创建一个单独的视图，该视图返回来自 Django 的 HttpResponse 对象或来自 Django Rest Framework 的 Response 对象。

您的代码几乎没有其他问题；你的这部分标记毫无意义：

      <div class="row">
        <div class="col-sm-12">
          <button type="submit" class="btn btn-primary">Submit selections</button>
          </form>
        </div>
      </div>

您已经在表单的结束标记周围打开了两个新 div，而开始标记不在它最近的父级中。这样的事情会更有意义：

  <form>

      <!-- rest of code -->

      <div class="row">
        <div class="col-sm-12">
          <button type="submit" class="btn btn-primary">Submit selections</button>
        </div>
      </div>
  </form>

对于本节，我建议使用template literals：

str += '<div class="item-details">' + 
       'User Id is = ' + data[i].userId + '<br />' +
       'Id is= ' + data[i].id + '<br />' +
       'Title is = ' + data[i].title + '<br />' +
       '</div>';

看起来像这样：

str += `<div class="item-details">
            User Id is = ${data[i]}<br />
            Id is = ${data[i].id}<br />
            Title is = ${data[i].title}<br />
        </div>`

这更容易阅读并且不需要大量的字符串连接。