更新列表項

在我的模板我的列表從服務器中檢索：更新列表項

{% 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

回答

相關問題