更新呈现的 django 模板中的列表项

Question

在我的模板中，我有从服务器检索到的列表：

{% 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 对象，但我无法成功更新列表项。

感谢任何帮助

Answer 1

我认为这里的问题是，您试图返回一个列表，然后使用 django 模板循环构建该列表。您可能可以跳过几个环节并通过执行一些 jquery 条件来执行此操作，其中在返回响应后在页面中包含另一个 HTML 文件......但无论哪种方式，您都必须使用 jquery 和 django 所以我'我不确定为什么这种方法会更干净。

为此，我将在您的按钮上使用 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，然后重新构建它。但我在基本的