JSON POST 和 GET 404（未找到）

Question

我正在嘗試在 Django 中創建 API，但在 JavaScript 控制台中收到以下錯誤消息。

GET http://127.0.0.1:8000/edit/undefined 404 (Not Found)
POST http://127.0.0.1:8000/edit/undefined 404 (Not Found)

有誰知道如何解決這個問題？

API url: path("edit/<int:post_id>", views.edit, name="edit")

視圖.py

def edit(request, post_id):
    try:
        post = Post.objects.get(user=request.user, pk=post_id)
    except Post.DoesNotExist:
        return JsonResponse({"error": "Post does not exist."}, status=404)

    if request.method == "GET":
        return JsonResponse(post.serialize())
    else:  
        return JsonResponse({"error": "Need a GET request."}, status=404)

JavaScript

document.addEventListener('DOMContentLoaded', function(){
    const editButtons = document.querySelectorAll('.edit_button');
    for (const button of editButtons) {
      button.addEventListener('click', () => edit_email());
    }
  });

function edit_email(id){
    console.log("edit button is clicked")
    document.querySelector('#post_itself').style.display = 'none';
    document.querySelector('#date_and_time').style.display = 'none';
    document.querySelector('#likes').style.display = 'none';

    const textarea = document.createElement('textarea');
    //get post
    fetch(`/edit/${id}`)
    .then(response => response.json())
    .then(post => {
        textarea.innerHTML =   `${post.post}`
        document.querySelector('#p_user').append(textarea);
    })

    //save the post
    fetch(`/edit/${id}`,{
        method: 'POST',
        post: JSON.stringify({
            post: textarea.value
        })
    })
}

HTML

{% for post in page_obj.object_list %}
            <div class = "individual_posts">
                <a href="{% url 'username' post.user %}"><h5 id="p_user" class = "post_user">{{ post.user }}</h5></a>
                <h6 id = "post_itself">{{ post.post }}</h6>
                <h6 id="date_and_time" class = "post_elements">{{ post.date_and_time }}</h6>
                <h6 id="likes" class = "post_elements">{{ post.likes }}&#x1F44D;</h6>
                {% if post.user == request.user %}
                    <button id="editButton" class="edit_button">Edit</button>
                {% endif %}
            </div>
        {% endfor %}

我認為我將 id 傳遞給 API 的方式可能有問題，但我不確定。 HTML中的for循環會導致問題嗎？

模型.py

class User(AbstractUser):
    followers = models.ManyToManyField("self", related_name="users_followers", symmetrical=False)
    following = models.ManyToManyField("self", related_name ="who_user_is_following", symmetrical=False)

    def serialize(self):
        return{
            "followers": self.followers,
            "following": self.following
        }

class Post(models.Model):
    post = models.TextField()
    user = models.ForeignKey(User, on_delete=models.CASCADE, default="")
    likes = models.IntegerField(default=0)
    date_and_time = models.DateTimeField(auto_now_add=True)

    def serialize(self):
        return{
            "id": self.id,
            "post": self.post,
            "user": self.user,
            "likes": self.likes,
            "date_and_time": self.date_and_time
        }

Answer 1

您在這里調用沒有 id 的 edit_email：

button.addEventListener('click', () => edit_email());

原因是，在通話后你會在這一行得到/edit/undefined ：

fetch(`/edit/${id}`)

你不發送任何類似id的東西，我可以想象它應該是這樣的：

button.addEventListener('click', (event) => edit_email(event.target.value));

您還需要將 value 屬性作為 post.id 傳遞給按鈕，假設 post 對象在您的 for 循環中有一個 id 鍵。

如果您收到參考錯誤，您需要檢查 page_obj.object_list 是否具有所有帖子的 id 鍵。