javascript - 更新呈现的 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，然后重新构建它。但是我在基础里加了