更新已渲染的django模板中的列表项

Update list item in rendered django template

本文关键字：列表 django 更新      更新时间：2023-09-26

在我的模板中，我从服务器检索了列表:

{% for elem in event_list %}
  <li id="item{{forloop.counter}}"> 
     <a>...</a>
     <button onclick="fetch({{elem.id}})">...</button>
     {{ elem.id }}
     {{ elem.name }}
  </li>
{% endfor %}

当我单击按钮时，我调用服务器来获取一些新信息，并希望用新检索到的信息更新特定的列表项。我怎么能这么做呢?

我的javascript代码如下:

function fetch(elem_id){
  var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          resp = JSON.parse(xhr.responseText);
          document.getElementById("item"+elem_id).innerHTML = resp;
        }
      };
      url = SERVER_URL
      xhr.open('GET', url, true);
      xhr.send();      
}

我让服务器返回一个字典，然后在javascript中被视为JSON对象，但我不能成功更新列表项。

感谢您的帮助

我认为这里的问题是，你试图返回一个列表，然后用django模板循环构建列表。你可能会跳过一些障碍，并通过做一些jquery条件来实现这一点，在响应返回后，在页面中包含另一个HTML文件…但不管怎样，你都必须使用jquery所以我不确定为什么这种方法会更干净。

要做到这一点，我会在你的按钮上使用一个AJAX处理程序来运行django函数，并返回一个json响应，其中包含列表，你可以使用jquery来构建你的ul。在Django: 

def list_return_function(request):
        //logic
        updated_list = [...]
    response_data = json.dumps({'list_data':updated_list)})
    return HttpResponse(response_data, content_type='application/json')
Jquery处理程序:

$( button_selector ).on('click', function() { 
  //some logic maybe
  old_list = [...]
  $.ajax({
    url: "/site_url/django_function_url/",
    type: "POST",
    data: {data: old_list,},
    success:function(data) { 
          //your returned python list
          new_list = data['list_data']
          //Now, loop through the new_list and append these items wrapped in <li> tags to your ul. 

      }
    });

});

这是非常简单的，但也许你会明白的。如果这真的很糟糕，没有帮助，让我知道为什么，我会尽量让它更清楚。

所以这取决于你的python函数返回什么你想用jquery做什么。它是返回完整的新列表，还是只返回需要更新的新项。如果它返回完整的新列表，我将清除html并重新构建它。但是我添加了基本的

相关文章：