Question

我想根据ajax调用的响应更新模板中的列表。据我所知，不可能直接从视图发回列表并迭代它。这就是为什么我试图想出一个替代方案，但我有点卡住了。这是我目前的代码：

模板（缩短）：

{% 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应替换为迭代新值并更新上面列表中的值的内容。这里棘手的部分是，列表项的数量可能与以前不同（都更低或更高）。但是，我不清楚视图的响应如何，这就是为什么它仍然有一个占位符（见下一部分）。

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>包裹在身份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
        }
    }
}

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

1 个答案: