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＆amp; 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 Handler：

$( 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，并重新发布它。但我在基本的

中添加了

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

1 个答案: