未找到对 Python Django 的 JavaScript 请求

Question

我是 Django 和 Javascript 新手。现在完全陷入了这个错误，可能是一件很小的事情，但我不知道问题出在哪里。

我想使用 Javascript 通过我的表单删除文档，并通过请求将其发送到我的 Django 后端。在终端我收到此错误消息：

"Not Found: /delete_document/7/
[23/Feb/2024 13:26:53] "DELETE /delete_document/7/ HTTP/1.1" 404 2371"

请求颜色是黄色，正如我所见，它只是找不到我的视图功能。

views.py

@require_http_methods(['DELETE'])
def delete_document(request, document_id):
    document = get_object_or_404(Document, pk=document_id)
    document.delete()
    return JsonResponse({'message': 'Document deleted successfully'}, status=204)

urls.py

from django.urls import path

from . import views

# Define namespace
app_name = 'advice'

urlpatterns = [
    ...
    path('delete_document/<int:document_id>/', views.delete_document, name='delete_document'),
]

index.html相关部分

    <form id="documentForm" action="" method="post" data-base-action="{% url 'advice:gpt_base' %}">
        {% csrf_token %}
        <input type="hidden" name="firstQuestion" value="True">
        <select id="documentSelect" class="form-select" aria-label="Select form">
            <option selected>Select a file</option>
            {% for document in documents %}
                <option value="{{ document.id }}">{{ document.title }}: {{ document.uploaded_file.url }}</option>
            {% endfor %}
        </select>
        <button type="button" class="btn btn-danger" id="deleteButton">Delete</button>
        <br>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <script>
        document.getElementById('deleteButton').addEventListener('click', function() {
            var selectedDocumentId = document.getElementById('documentSelect').value;
            if (selectedDocumentId === 'Select a file') {
                alert('Please select a document to delete.');
            } else {
                if (confirm('Are you sure you want to delete this document?')) {
                    fetch(`/delete_document/${selectedDocumentId}/`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRFToken': document.querySelector('input[name="csrfmiddlewaretoken"]').value
                    }
                })
                    .then(response => {
                        if (response.ok) {
                            // Reload the page to reflect changes
                            window.location.reload();
                        } else {
                            console.error('Failed to delete document');
                        }
                    })
                    .catch(error => console.error('Error:', error));
                }
            }                
        });
    </script>
    <script>
        document.getElementById('documentSelect').addEventListener('change', function() {
            var selectedDocumentId = this.value;
            var form = document.getElementById('documentForm');
            var baseAction = form.getAttribute('data-base-action');
            form.action = baseAction + selectedDocumentId + '/';
        });
    </script>

一切正常，除了由于该错误而导致的“删除”按钮。 请帮我解决一下。预先感谢！

我尝试删除使用 Javascript 发送请求的表单中的文档，结果导致终端出现错误，并显示上述错误消息。尝试以各种可能的方式解决这个问题，ChatGPT 没有在代码中发现任何错误，并且似乎是一个很好的实现。

Answer 1

我刚刚发现了这个小错误。在获取部分，我必须将：

fetch(/delete_document/${selectedDocumentId}/

替换为

fetch(delete_document/${selectedDocumentId}/

并删除网址开头的“”。

抱歉帖子太长..:)

Ps：我希望这能帮助其他有类似问题的人腾出2个小时