Javascript 使用Ajax提交Django HTML表单

这是我第一次尝试用Ajax提交表单

这是我的密码：

index.html（其中声明了表单）：

url.py:

def send_message(request):
    if request.is_ajax():
        sender_name = request.POST.get('name')
        sender_email = request.POST.get('email')
        message_subject = request.POST.get('subject')
        message_text = request.POST.get('message')

        html_message = render_to_string('contact_template.html', {'sender_name': sender_name, 'sender_email': sender_email, 'message_subject': message_subject, 'message_text': message_text})

        email_subject = 'Message from website visitor'
        email_from = 'me@mygmail.com'
        email_to = ['me@mydomain.com']

        send_mail(email_subject, '', email_from, email_to, html_message=html_message)

        response = {
            'thankyou': 'Your message has been sent. Thank you!'
        }

        return JsonResponse(response)

path('sendmessage/', views.send_message, name='send_message'),

和Ajax脚本（index.html）：

$（“#联系我”）。提交（功能（e）{
e、 预防默认值（）
$.ajax({
类型：“POST”，
url:“/sendmessage/”，
数据：{
发件人名称：$（'#名称'）.val（），
发件人电子邮件：$（'#电子邮件'）.val（），
消息主题：$（“#主题”）.val（），
消息文本：$（“#消息”）.val（），
csrfmiddlewaretoken:“{{csrf_令牌}}”，
数据类型：“json”，
},
成功：功能（数据）{
$（'#谢谢'）.html（''+data.msg+''）
},
});
});

但当我填写表格并点击提交时，页面正在重新加载（但不应该），没有发送电子邮件，也没有显示感谢信息

请帮忙

编辑：

def send_message(request):
    if request.is_ajax():
        sender_name = request.POST.get('name')
        sender_email = request.POST.get('email')
        message_subject = request.POST.get('subject')
        message_text = request.POST.get('message')

        html_message = render_to_string('contact_template.html', {'sender_name': sender_name, 'sender_email': sender_email, 'message_subject': message_subject, 'message_text': message_text})

        email_subject = 'Message from website visitor'
        email_from = 'me@mygmail.com'
        email_to = ['me@mydomain.com']

        send_mail(email_subject, '', email_from, email_to, html_message=html_message)

        response = {
            'thankyou': 'Your message has been sent. Thank you!'
        }

        return JsonResponse(response)

path('sendmessage/', views.send_message, name='send_message'),

我在脚本中找到了一些缺少的“，”并编辑了“url.py”，现在我收到了电子邮件，但是：

在电子邮件中，我看到“无”表示发件人的姓名、电子邮件地址等

---

“谢谢”消息未显示。我看到“未定义”。实际上，我不知道如何在脚本中包含所需的完整html标记。

JavaScript中的参数名称与视图不匹配。这就是问题所在。按如下方式修改AJAX脚本以解决此问题：

<script>
$('#contact_me').submit(function(e){
    e.preventDefault()

    $.ajax({
        type : "POST",
        url : "/sendmessage/",
        data: {
            name : $('#name').val(),
            email : $('#email').val(),
            subject : $('#subject').val(),
            message : $('#message').val(),
            csrfmiddlewaretoken : '{{ csrf_token }}',
            datatype : "json",
        },

        success: function(data){
            $('#thankyou').html('<div class="sent-message">' + data.msg + '</div>')
        },
    });
});
</script>

$（“#联系我”）。提交（功能（e）{
e、 预防默认值（）
$.ajax({
类型：“POST”，
url:“/sendmessage/”，
数据：{
名称：$（'#name'）.val（），
电子邮件：$（'#email'）.val（），
主题：$（“#主题”）.val（），
消息：$（“#消息”）.val（），
csrfmiddlewaretoken:“{{csrf_令牌}}”，
数据类型：“json”，
},
成功：功能（数据）{
$（'#谢谢'）.html（''+data.msg+''）
},
});
});

您的csrf令牌为文本，缺少报价。它应该是

{{csrf\u token}}

。后面的逗号也不见了，谢谢。它已更正，但主要问题尚未解决。您的JS看起来正确，不确定您的问题可能是什么，您是否可以检查控制台中的JS错误，如果api未返回任何错误，还可以检查网络选项卡。此外，如果有任何错误，您可以检查django终端。我检查了控制台，发现了一个错误：“意外标识符”，它引用的是脚本行：url:“/sendmessage/”。我不知道它有什么问题。你在

键入：“POST”、

和

url:“/sendmessage/”、

之后漏掉了逗号。添加这些，它应该会工作。谢谢，但我看不出你的代码和我的代码有什么区别。请检查AJAX调用的

数据

参数中的参数名称。我太愚蠢了。谢谢，很乐意帮忙。