使用 Ajax 提交 Django HTML 表单

Question

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

这是我的代码：

index.html（声明表单的地方）：

form method="post" role="form" class="email-form" id="contact_me">
                            {% csrf_token %}
                            <div class="form-row">
                                <div class="col-md-6 form-group">
                                    <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required />
                                </div>
                                <div class="col-md-6 form-group">
                                    <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required />
                                </div>
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required />
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" name="message" rows="5" placeholder="Message" required /></textarea>
                            </div>
                            <div class="mb-3" id="thankyou">

                            </div>
                            <div class="text-center"><button type="submit">Send Message</button></div>
                        </form>

在表单提交后有一个保留显示消息。

views.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)

urls.py:

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

还有 Ajax 脚本（index.html）：

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

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

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

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

请帮忙。

编辑：

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

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

未显示感谢信息。我看到“未定义”。其实我不知道如何在脚本中包含我需要的完整 html 标签。

Answer 1

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>