如何实现点击按钮在当前页面div加载Django评论表单而非跳转新页面

你当前页面看不到完整评论表单字段的核心原因是：渲染故事详情页的story_details视图没有将CommentForm的实例传递到模板上下文，因此模板里的{{form.as_p}}没有内容输出，仅能展示你手动写的提交按钮。

• 第一步：修改story_details视图，注入评论表单
  在你原有的story_details视图逻辑中，新增实例化评论表单并传入模板上下文的逻辑：

def story_details(request, story_id):
    # 保留你原有获取story对象、其他上下文参数的逻辑
    story = Story.objects.get(id=story_id)
    # 新增：实例化空的评论表单，传入上下文
    comment_form = CommentForm()
    context = {
        "story": story,
        "form": comment_form
    }
    return render(request, "你的故事详情页模板路径", context)

• 第二步：修复页面模板的语法错误
  你现有页面代码中的<form>标签没有闭合，会导致渲染异常，修改后代码如下：

<button type="button" name="answer" onclick="showDiv('toggle')">Add Comment</button>

<div id="toggle" style="display:none" class="comments">
  <form action="{% url 'storysharing:comment' story.id %}" method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Submit</button>
  </form> <!-- 补充缺失的form闭合标签 -->
</div>

• 第三步：移除div外边框
  给承载表单的.comments类添加CSS样式即可：

.comments {
  border: none !important;
  /* 若还有默认阴影/内边距可以同步移除：
  box-shadow: none;
  padding: 0;
  */
}

如果需要提交评论后不跳转刷新页面，可以额外给表单绑定AJAX提交逻辑，替换默认的表单提交行为即可。

内容的提问来源于stack exchange，提问作者John DOe