Javascript - 使用 Fetch 编辑表单

Question

我正在尝试编辑我网站上的现有表单，并使用 Javascript 保存编辑（无需刷新页面）。我也在使用 Django。

到目前为止，当用户点击页面上的“编辑”时，表单会适当地出现，显示已经保存在那里的信息。但是当我点击“保存”时，我得到一个 404 错误。 问题出在 Javascript 函数 edit_post 中。我也不确定我是否正确使用了 stringify，我是使用 Django 和 Javascript 的新手。任何帮助表示赞赏。

function edit_handeler(element) {
  id = element.getAttribute("data-id");
  document.querySelector(`#post-edit-${id}`).style.display = "block";
  document.querySelector(`#post-content-${id}`).style.display = "none";
  // everything above this works and opens up the form for editing

  edit_btn = document.querySelector(`#edit-btn-${id}`);
  edit_btn.textContent = "Save";
  edit_btn.setAttribute("class", "text-success edit");
  if (edit_btn.textContent == "Save") {
  edit_post(id, document.querySelector(`#post-edit-${id}`).value); //here

  edit_btn.textContent = "Edit";
  edit_btn.setAttribute("class", "text-primary edit");
}}

function edit_post(id, post) {
  const body = document.querySelector(`#post-content-${id}`).value;

  fetch("/edit_post/", {
    method: "POST",
    body: JSON.stringify({
    body:body
    })

  }).then((res) => {
    document.querySelector(`#post-content-${id}`).textContent = post;
    document.querySelector(`#post-content-${id}`).style.display = "block";
    document.querySelector(`#post-edit-${id}`).style.display = "none";
    document.querySelector(`#post-edit-${id}`).value = post.trim();
  });
}

相关 html - 这是在卡片内，用于 html 文件中的帖子本身：

<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="btn-btn primary" data-id="{{i.id}}" id="edit-btn-{{i.id}}" 
 onclick="edit_handeler(this)" >Edit</button> <br><br>

views.py

def edit_post(request, pk):

    post = Post.objects.get(id=pk)
    form = PostForm(instance=post)
    if request.method == "POST":
        form = PostForm(request.POST, instance=post)
        if form.is_valid():
            form.save()
            return JsonResponse({}, status=201) # this works to edit and save to db
    else:
        if request.method == "GET":           
            form = PostForm(instance=post)
            form_for_post = {'form': PostForm()}
  
            return render(request, "network/make_post.html", {
                "post": post,
                "form_for_post": form,
    })

urls.py（相关的）

path('edit_post/<str:pk>/', views.edit_post, name="edit_post"),
path('edit_post/', views.edit_post),
path("profile/<str:username>", views.profile, name="profile"),

Answer 1

假设你在本地运行你的 django 服务器并且你从你的 fetch 请求中得到一个 404，那么这意味着 url 路径不存在。要么你的 django 服务器没有运行，要么你提供 fetch 请求的 url 不正确。如果/edit_post/ 是您想要的端点，请尝试使用服务器的完整请求 URL 获取

类似的东西 http://localhost:8000/edit_post

将 8000 替换为您的服务器正在运行的任何端口。

顺便说一句，您的 fetch 正文结构正确。