我在django的视图函数里渲染一个模板文件得到一个html代码格式的字符串,然后通过json传到前台,但是有些地方布局却乱掉了,具体情况如下:
views.py
def post_ajax(request):
TOTLE = 5
OFFSET = int(request.GET.get('offset', 0))
END = OFFSET + TOTLE
if OFFSET + 1 >= Post.objects.count():
LOADED = "已经全部加载完毕"
return HttpResponse(LOADED)
posts = Post.objects.filter(pub_time__lte=timezone.now())[OFFSET:END]
for post in posts:
t = get_template('blog/ajax_post.html')#获取模板
html = t.render(Context({'post': post}))#手动渲染模板
print(html)#此时输出结果是正确的
json_list.append({
'html': html,
})#将渲染后的html格式代码字符串加入列表
data = json.dumps(json_list)#转换为json格式传到前台
return HttpResponse(data, content_type="application/json")
模板文件代码如下:
ajax_post.htm
<div class="card white lighten-2">
<div class="card-content teal-text">
<div class="row">
<div class="col s10 m10">
<a href={% url 'blog:detail' post.id %}><span class="card-title">{{ post.title }}</span></a>
</div>
<div class="col s1 m1">
{% if post.topped %}
<div class="badge teal white-text">置顶</div>
{% endif %}
</div>
<div class="col s1 m1">
{% if post.essential %}
<div class="badge red white-text">精华</div>
{% endif %}
</div>
</div>
{% load md %}
{% if post.abstract %}
<p>{{ post.abstract }}</p>
{% else %}
<div>{{ post.body|truncatechars:108|custom_markdown }}</div>
{% endif %}
</div>
<div class="card-action">
<span>{{ post.views }}阅读</span>
<span class="ds-thread-count" data-thread-key="{{ post.id }}" data-count-type="comments"></span>
<span>{{ post.likes }}喜欢</span>
<span>时间:{{ post.pub_time|date:'Y-m-d' }}</span>
<a class="right waves-effect waves-light btn" href={% url 'blog:detail' post.id %}>阅读全文</a>
</div>
</div>
在视图函数中我打印了渲染后的html字符串,渲染是正确的,但是通过json传到前台后html字符串就乱了,出错的两行关键代码如下:
<a href={% url 'blog:detail' post.id %}><span class="card-title">{{ post.title }}</span></a>
<a class="right waves-effect waves-light btn" href={% url 'blog:detail' post.id %}>阅读全文</a>
注意到标签是位于标签里面的,但通过json传到前台后变成了这样:
<a href='post/4'></a><span class="card-title">{{ post.title }}</span>
<a class="right waves-effect waves-light btn" href='post/4'></a>阅读全文
标签跑到了标签外面了。难道是字符串转换成json格式后出了错么?为什么会出现这样的现象?
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。