当我使用Ajax和Jquery时为什么html布局混乱？

Question

我使用django开发博客，我添加了无尽的加载功能来显示主页中的所有文章，但这里有一些问题。

在我的views.py中，我写了这段代码：

...
json_list = []
for post in posts:
    t = get_template('blog/ajax_post.html')
    html = t.render(Context({'post': post}))
    json_list.append({
        'html': html,
    })
data = json.dumps(json_list)
return HttpResponse(data, content_type="application/json")

模板'blog / ajax_post.html'像这样：

<div class="col s10 m10">
<a href={% url 'blog:detail' post.id %}><span class="card-title">{{ post.title }}</span></a>
</div>
<a class="right waves-effect waves-light btn" href={% url 'blog:detail' post.id %}>read more</a>

当我在视图中渲染时，渲染很好。例如，我打印html内容：

<a href='post/6'><span class="card-title">test title</span></a>
<a class="right waves-effect waves-light btn" href='post/6'>read more</a>

但是当它被传递到前面时使用json（返回HttpResponse（data，content_type =“application / json”）），布局混乱。我打印它们，输出如下：

<a href='post/6'></a><span class="card-title">test title</span>(notice here)
<a class="right waves-effect waves-light btn" href='post/6'></a>read more(notice here)

'span'标签或'read more'不在'a'标签内。为什么？

ps：我的英语有点差。我希望你能理解我说的话并给我一些帮助。非常感谢你！