Django编辑表单场景下JavaScript过早执行导致页面提前提交问题

• 编辑按钮点击后的逻辑顺序错误：你在点击编辑按钮后立即将按钮文本改为Save，紧接着就判断文本等于Save直接调用保存接口，相当于点击编辑的瞬间就触发了保存请求，没有给用户编辑内容的时间，所以文本框刚设置显示就被后续的保存逻辑又隐藏了，自然看不到弹出。
• 之前preventDefault报错的原因：document.querySelectorAll()返回的是节点集合，不是单个DOM元素，不能直接调用addEventListener方法；且submit是表单<form>的事件，绑在<textarea>上本身就不会触发。
• 取值逻辑错误：#post-content-${id}是span标签，不存在value属性，你在edit_post中拿到的body值是undefined。
• Django后端无法解析JSON请求：你前端发的是JSON格式数据，但后端直接用request.POST取值，只能拿到表单格式的数据，JSON数据要从request.body解析。

1. JavaScript逻辑 #

// 编辑/保存切换处理
function edit_handeler(element) {
  const id = element.getAttribute("data-id");
  const editBtn = document.querySelector(`#edit-btn-${id}`);
  const editArea = document.querySelector(`#post-edit-${id}`);
  const contentSpan = document.querySelector(`#post-content-${id}`);

  // 当前是编辑状态，点击后切换为保存状态，显示编辑框
  if (editBtn.textContent === "Edit") {
    editArea.style.display = "block";
    contentSpan.style.display = "none";
    editBtn.textContent = "Save";
    editBtn.setAttribute("class", "text-success edit");
  } 
  // 当前是保存状态，点击后提交数据
  else {
    const newContent = editArea.value;
    edit_post(id, newContent);
  }
}

function edit_post(id, newPost) {
  fetch(`/edit_post/${id}`, {
    method: "POST",
    // 必须加请求头，告诉后端是JSON格式数据
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      body: newPost
    })
  }).then((res) => {
    const editBtn = document.querySelector(`#edit-btn-${id}`);
    const editArea = document.querySelector(`#post-edit-${id}`);
    const contentSpan = document.querySelector(`#post-content-${id}`);
    // 保存成功后切回显示状态
    contentSpan.textContent = newPost.trim();
    contentSpan.style.display = "block";
    editArea.style.display = "none";
    editBtn.textContent = "Edit";
    editBtn.setAttribute("class", "text-primary edit");
  });
}

2. views.py逻辑 #

import json
from django.http import JsonResponse
from .models import Post
from .forms import PostForm

@csrf_exempt
def edit_post(request, pk):
    post = Post.objects.get(id=pk)
    if request.method == "POST":
        # 解析JSON格式的请求体
        data = json.loads(request.body)
        # 手动构造提交数据给表单校验，字段名和你的PostForm对应即可
        form = PostForm({"text": data["body"]}, instance=post)
        if form.is_valid():
            form.save()
            return JsonResponse({}, status=201)
    # GET请求的逻辑你可以根据自己的需求保留，这里编辑操作不需要走GET
    return JsonResponse({"error": "请求错误"}, status=400)

3. HTML修正 #

<!-- 补全span的开头尖括号 -->
<span id="post-content-{{i.id}}" class="post">{{i.text}}</span> <br> 
<textarea data-id="{{i.id}}" id="post-edit-{{i.id}}" style="display:none;" class="form-control textarea" row="3">{{i.text}}</textarea>
<!-- 修正button的class错误 -->
<button class="btn btn-primary" data-id="{{i.id}}" id="edit-btn-{{i.id}}" onclick="edit_handeler(this)" >Edit</button>

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