如何从通过ajax调用接收的json数组动态生成html列表？答案

【问题标题】：How to dynamically generate html list from json array received via ajax call?如何从通过ajax调用接收的json数组动态生成html列表？
【发布时间】：2017-07-30 18:33:24
【问题描述】：

我是一名 Django 新手，正在尝试构建一个允许用户将曲目添加到播放列表的应用程序。我使用会话在视图中生成轨道 ID 字符串列表，并返回带有序列化数组的 http 响应。问题是尝试遍历模板中的数组以构建有序列表的格式不正确。它显示为 python 列表，而不是预期的项目符号 html 列表。

任何帮助将不胜感激！

分区

<!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))

【问题讨论】：

但是您没有迭代从 Ajax 调用返回的结果。您只需将其直接转储到#playlist div 中即可。
如何迭代结果？我怀疑这是问题所在，但我不确定如何找到正确的解决方案
Vivek 向您展示了一种方法。另一种方法是更改您的视图，使其呈现一个独立的模板片段，类似于您已经拥有的 HTML 的内部部分，并返回它而不是 JSON；然后你可以直接将它插入到 HTML 中。
有趣。所以我会有两个 html 文件并将一个插入另一个？

标签： jquery python ajax django

【解决方案1】：

由于您使用 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")

【讨论】：

谢谢维韦克！我会试试这个并报告
它可以工作，但是它将字符串中的每个字符打印为一个新的列表项，而不是列表中的每个字符串。原始 ajax 数据看起来像 ['track1_id', 'track2_id', 'track3_id']
你能把你在 ajax 响应中收到的数据粘贴到这里吗？
可能您将 data.session_playlist.length 替换为 data.length 并将 data.session_playlist[i] 替换为 data[i] 那么它应该可以正常工作。
数据返回为 ["Life Round Here", "Pembroke"] 并且每次用户在其中一个表单上按下提交时都会添加另一个轨道