我是一名 Django 新手，正在尝试构建一个允许用户将轨道添加到播放列表的应用程序。 我使用 session 在 View 中生成一个轨道 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>
View
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 调用来发出请求，因此您需要在 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>
所以你的 View 应该看起来像这样。
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")
