python - 通过ajax更新可变长度的html列表

Question

我想根据 ajax 调用的响应更新模板中的列表。据我了解，不可能直接从 View 发送回列表并对其进行迭代。这就是为什么我试图想出一个替代方案，但我有点陷入困境。这是我当前的代码:

• 模板(缩短):

  {% for a in attributes %}
    <li> a.name </li>
  {% endfor %}
  

• Ajax :

  $.ajax({
    url: "{% url 'main:next_attributes' %}",
    data: {'next':'abc'},
    datatype : 'json',
    success: function (data) {
    console.log("Success");}})
  

console.log 应替换为迭代新值并更新上面列表中的值的内容。这里棘手的部分是，列表项的数量可能与以前不同(更低或更高)。但是，我不清楚 View 的响应可能是什么样子，这就是为什么它仍然有一个占位符(参见下一部分)。

• Views.py:

  def next_attributes(request):
      keyword = request.GET.get('next', None)
      next_attributes = Attributes.objects.filter(keyword=keyword)    
      data = {'attributes':next_attributes}
      return JsonResponse(data)
  

这里的问题是，我无法通过 JsonResponse 返回查询结果..

总结:我想根据 ajax 请求中给出的过滤器获取新的查询结果，并更新模板中的列表(可变长度，基于查询结果)。如果有任何指点，我将不胜感激。

Answer 1

正如@thebjorn所指出的，您可以使用Attributes.objects.filter(keyword=keyword).values('name')获取值列表。完整的示例如下:

def next_attributes(request):
    keyword = request.GET.get('next', None)
    next_attributes = Attributes.objects.filter(keyword=keyword).values('name')  
    data = {'attributes':next_attributes}
    return JsonResponse(data)

我不完全确定 .values 是否有效返回一个 JSON 可序列化对象，但本质就是这样。

然后，预期的对象应该如下所示:

{'attributes': [{'name': 'name1'}, {'name': 'name2'}]}

然后，由于您使用的是 jQuery，因此您可以执行以下操作。假设你的<li>被包裹在 <ul> 中id myList :

$.ajax({
    url: "{% url 'main:next_attributes' %}",
    data: {'next':'abc'},
    datatype : 'json',
    success: function (data) {
        $('#myList').empty(); // Clear old values
        data.attributes.forEach(function(element){
            $('#myList').append("<li>"+element.name+"</li>"); // Please note that this does not include any sanitization of the data. Be careful with that
        }
    }
}