如何從json數組動態生成html列表通過ajax調用接收？

我是一個Django新手，試圖構建一個允許用戶添加曲目到播放列表的應用程序。我使用會話在視圖中生成軌道ID字符串列表，並返回帶有序列化數組的http響應。問題是，試圖迭代模板中的數組來構建有序列表時，格式不正確。它顯示爲一個python列表，而不是預期的帶符號的html列表。如何從json數組動態生成html列表通過ajax調用接收？

任何幫助將不勝感激！

股利

<!DOCTYPE html> 

<div id="playlist"> 
<ol> 
{% for track in playlist %} 
    <li>{{track}}</li> 
{% endfor %} 
</ol> 
</div> 
</html>

的JavaScript

<script type="text/javascript"> 
    $(document).on('submit', '.track_form', function() { 
     var $form = $(this); 
      $.ajax({ 
       url: $form.attr('action'), 
       data: $form.serialize(), 
       type: $form.attr('method'), 
       success: function (data) { 

        $("#playlist").html(data); 
       }, 
       error: function(data) { 
        console.log('There was a problem'); 
       } 
      }); 
      return false;  
     }); 
</script>

認爲

def artistpage(request): 
    if request.method == 'POST': 
     session_playlist = request.session.get('session_playlist', []) 
     tname = str(request.POST.get('track_name')) 
     session_playlist.append(tname) 
     request.session['session_playlist'] = session_playlist 

     return HttpResponse(json.dumps(session_playlist))

來源

2017-07-30 arshadic

但是你沒有迭代從Ajax調用返回的結果。你只需將它直接轉儲到#playlist div。 –

如何迭代結果？我懷疑是這個問題，但我不知道如何找到適當的解決方案 – arshadic

Vivek向你展示了一種方法。另一種方法是更改視圖，以便呈現獨立的模板片段，類似於已經使用的HTML內部部分，並返回該片段而不是JSON;那麼你可以直接將它插入到HTML中。 –

由於您使用Ajax調用，使請求，您需要使用JavaScript創建HTML列表碼。在這種情況下，Django模板將不起作用。一旦你的ajax調用返回成功，你可以像這樣創建列表html。

<script type="text/javascript"> 
$(document).on('submit', '.track_form', function() { 
    var $form = $(this); 
     $.ajax({ 
      url: $form.attr('action'), 
      data: $form.serialize(), 
      type: $form.attr('method'), 
      success: function (data) { 
       var list_html = "<ol>"; 
       for(var i=0; i <data.length; i++) { 
        list_html += "<li>" + data[i] + "</li>"; 
       } 
       list_html += "</ol>" 
       $("#playlist").html(list_html); 
      }, 
      error: function(data) { 
       console.log('There was a problem'); 
      } 
     }); 
     return false;  
    });

你的HTML應該是這樣的。

<!DOCTYPE html> 
    <div id="playlist"> 
    </div> 
</html>

所以你的看法應該看起來像這樣。

def artistpage(request): 
    if request.method == 'POST': 
     session_playlist = request.session.get('session_playlist', []) 
     tname = str(request.POST.get('track_name')) 
     session_playlist.append(tname) 
     request.session['session_playlist'] = session_playlist 

     return HttpResponse(json.dumps(session_playlist), content_type="application/json")

來源

2017-07-30 18:46:30 viveksyngh

謝謝Vivek！我會嘗試這種方式並回報 – arshadic

它的工作原理，但它會將字符串中的每個字符都打印爲一個新的列表項，而不是列表中的每個字符串。原始ajax數據看起來像['track1_id'，'track2_id'，'track3_id'] – arshadic

你能粘貼你在ajax響應中收到的數據嗎？ – viveksyngh

如何從json數組動態生成html列表通過ajax調用接收？

回答

相關問題