Python 使用CBV(ListView)使用ajax响应Django更新HTML片段

Python 使用CBV(ListView)使用ajax响应Django更新HTML片段,python,ajax,django,Python,Ajax,Django,因此,我有一个主页,它由一个基本listview组成,其中包括cbv.all查询中显示的DBA中的所有对象。我想做的是包含一个搜索过滤器,因此我认为最好将它分离到一个单独的list.html片段中,以便以后可以重用。目前,我有一个ajax调用,它向cbv发送信息,返回的是render to list.html片段。但是,当我访问主页时,页面一开始并没有呈现 非常感谢您的帮助或建议,再次感谢 url.py 这是我的CBV模板: views.py 这是 drug_list.html 下面是list.

因此,我有一个主页,它由一个基本listview组成,其中包括cbv.all查询中显示的DBA中的所有对象。我想做的是包含一个搜索过滤器,因此我认为最好将它分离到一个单独的list.html片段中,以便以后可以重用。目前,我有一个ajax调用,它向cbv发送信息,返回的是render to list.html片段。但是,当我访问主页时,页面一开始并没有呈现

非常感谢您的帮助或建议,再次感谢

url.py

这是我的CBV模板:

views.py

这是 drug_list.html

下面是list.html:


我认为这样做行不通。有关Ajax调用和CBV,请参阅


然后,您需要以html格式将新的过滤数据返回到ajax调用,并通过JS返回Suces函数中的html。

您误解了在成功回调中需要做什么

该函数无法访问Django模板。但它不需要这样做,因为Django已经在响应中发送了片段,该片段在数据参数中可用。您只需将其插入现有页面即可

为此,你需要一个容器;因此,您应该修改drug_list.html,以便在include周围有一个div:

{% block content %}

<div id="list_contents">
  {% include 'expirations/list.html' %}
</div>

{% endblock %}

Daniel Roseman肯定帮助解决了这个难题,以下是更新的代码:

views.py:更新if/else语句以包含常规模板的默认列表视图。还添加了上下文名称“drugs”而不是“Druge”

class DrugListView(ListView):
    context_object_name = 'drugs'
    model = Drug
    template_name = 'expirations/drug_list.html'

    def get(self, request):
        if self.request.is_ajax():
            text_to_search = self.request.GET.get('searchText')
            print(text_to_search)
            return render(request, "expirations/list.html", {'drugs':Drug.objects.filter(name__contains = text_to_search).order_by('name')})
        else:
            return render(request, "expirations/drug_list.html", {'drugs':Drug.objects.all().order_by('name')})
drug_list.html:根据daniel的建议更改了成功回调函数load html

{% extends 'expirations/index.html' %}

{% block content %}
  <div id = 'list_view'>
  {% include 'expirations/list.html' %}
  </div>
{% endblock %}
{% block javascript %}
<script>
$(document).ready(function(){
  var input = $("#searchText")
    input.keyup(function() {
    $.ajax({
      type: "GET",
      url: "{% url 'drug_list' %}",
      data: {'searchText' : input.val()},
      success: function(data){
        $("#list_view").html(data)
        }
    })
    });
})
</script>
{% endblock %}

这确实帮了大忙。有没有指南可以了解ajax的成功函数调用的范围?@hpca01它有django发送的响应,仅此而已
{% for drug in drugs %}
    <div class = '.col-sm-12'>
        <ul class = 'list-group'>
            <li class = "list-group-item" >
              <span class = "badge">First Expiration: {{ drug.early_exp|date:"l M d Y" }}</span>
              <a href="{% url 'drug_detail' pk=drug.pk %}">{{ drug.name }}</a>
              {% regroup drug.expiration_dates.all by facility as facility_list %}
              {% for x in facility_list %}
              <span class="label label-info">{{ x.grouper }}</span>
              {% endfor %}
            </li>
        </ul>
    </div>
{% endfor %}
{% block content %}

<div id="list_contents">
  {% include 'expirations/list.html' %}
</div>

{% endblock %}
  success: function(data) {
    $("#list_contents").html(data)
 }
class DrugListView(ListView):
    context_object_name = 'drugs'
    model = Drug
    template_name = 'expirations/drug_list.html'

    def get(self, request):
        if self.request.is_ajax():
            text_to_search = self.request.GET.get('searchText')
            print(text_to_search)
            return render(request, "expirations/list.html", {'drugs':Drug.objects.filter(name__contains = text_to_search).order_by('name')})
        else:
            return render(request, "expirations/drug_list.html", {'drugs':Drug.objects.all().order_by('name')})
{% extends 'expirations/index.html' %}

{% block content %}
  <div id = 'list_view'>
  {% include 'expirations/list.html' %}
  </div>
{% endblock %}
{% block javascript %}
<script>
$(document).ready(function(){
  var input = $("#searchText")
    input.keyup(function() {
    $.ajax({
      type: "GET",
      url: "{% url 'drug_list' %}",
      data: {'searchText' : input.val()},
      success: function(data){
        $("#list_view").html(data)
        }
    })
    });
})
</script>
{% endblock %}