在Django中用jQuery提交表单遇Method Not Allowed错误求助

错误日志 #

Method Not Allowed (POST): /
Method Not Allowed: /
[01/May/2023 17:08:34] "POST / HTTP/1.1" 405 0

视图代码 #

def is_ajax(request):
    return request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest'

def submit_contact_form(request):
    if is_ajax(request=request):
        sender_name = request.POST.get('sender_name')
        sender_email = request.POST.get('sender_email')
        message_subject = request.POST.get('message_subject')
        message_body = request.POST.get('message_body')
        remote_addr = request.META.get('REMOTE_ADDR')
        remote_host = request.META.get('REMOTE_HOST')

        context = {
            'from': sender_name,
            'email': sender_email,
            'subject': message_subject,
            'message': message_body,
            'IP': remote_addr,
            'HOST': remote_host,
        }

        html_message = render_to_string('homepage/submit.contact.form.html', context)

        send_mail(
            f'Contact Form Submission: {message_subject}',
            f'{message_body}',
            'myemail@mydomain.com',
            ['myemail@mydomain.com', ],
            html_message=html_message,
        )
        return JsonResponse({}, status=200)
    else:
        return redirect('homepage:index')

jQuery代码 #

$('#contact-form').submit(function(e) {
    e.preventDefault();

    $('#sent-message').css("display", "none");
    $('#loading').css("display", "block");

    $.ajax({
        type: "POST",
        url: "/submit-contact-form/",
        data: {
            sender_name: $('#name').val(),
            sender_email: $('#email').val(),
            message_subject: $('#subject').val(),
            message_body: $('#message').val(),
            csrfmiddlewaretoken: csrfToken,
            datatype: "json",
        },

        success: function(){
            $('#loading').css("display", "none");
            $('#sent-message').css("display", "block");
            $('#contact-form').trigger('reset');
            $('#sent-message').delay(3000).fadeOut("slow");
        },

        error: function(){
            $('#loading').css("display", "none");
            $('#error-message').css("display", "block");
            $('#error-message').append("An error has occured. Please try again later.");
        }
    });
});

排查与解决方案 #

1. 修复表单提交路径不匹配问题 #

错误日志显示请求发送到了根路径/，但AJAX代码指定的是/submit-contact-form/，说明表单默认提交行为未被阻止：

• 检查模板中表单的id是否为contact-form，确保JS选择器能找到元素。
• 确认表单没有设置错误的action属性，若未设置action，默认会提交到当前页面路径，需保证e.preventDefault()正确执行。

2. 验证URL路由配置 #

确保submit_contact_form视图已在urls.py中正确绑定/submit-contact-form/路由：

# 示例urls.py配置
from django.urls import path
from .views import submit_contact_form

urlpatterns = [
    # 其他路由...
    path('submit-contact-form/', submit_contact_form, name='submit_contact_form'),
]

3. 修正AJAX参数位置错误 #

datatype属于AJAX的顶层配置参数，当前写在了data对象内，会导致参数无效，需调整位置：

$.ajax({
    type: "POST",
    url: "/submit-contact-form/",
    data: {
        sender_name: $('#name').val(),
        sender_email: $('#email').val(),
        message_subject: $('#subject').val(),
        message_body: $('#message').val(),
        csrfmiddlewaretoken: csrfToken,
    },
    datatype: "json", // 移至此处
    success: function(){...},
    error: function(){...}
});

4. 完善视图的请求方法校验 #

当前视图仅判断是否为AJAX请求，未校验请求方法，建议增加POST方法判断：

def submit_contact_form(request):
    if request.method == 'POST' and is_ajax(request=request):
        # 原有表单处理逻辑
    else:
        return redirect('homepage:index')

5. 确认CSRF令牌有效性 #

确保csrfToken变量已正确获取，可通过Django推荐的方式从cookie中读取：

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
const csrfToken = getCookie('csrftoken');

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