更新列表项

在我的模板我的列表从服务器中检索：更新列表项

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

任何帮助表示赞赏

来源

2016-11-08 roccoSenteta

如果我要这样做，我会将一个处理程序添加到您的按钮，该按钮向服务器发送一个AJAX请求，该请求将返回一个列表。然后，使用jquery构建列表。如果你不知道如何做到这一点，我可以发布一个完整的答案，可以使它更清晰。 – rob

我觉得这里的问题是，你试图返回一个列表，然后建立与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并重新绑定它。但我添加了基本的

来源

2016-11-08 16:25:27 rob

首先感谢您的帮助！问题出在'成功：功能（数据）{//这里}' 如何更新列表？ – roccoSenteta

我会尝试在我的项目中挖掘一段代码，这将有助于我在半小时左右编辑我的答案。 – rob

回答

相关问题