使用Ajax在Django中发送表单数据

Question

我在外部js文件中有ajax调用，如下所示：

$(document).ready(function () {
    // Contact form
    let contact_button = $("#contact-button");
    contact_button.on('click', function (e) {
        e.preventDefault();
        let contact_name = $("#contact-name");
        let contact_email = $("#contact-email");
        let contact_message = $("#contact-message");

        let csrftoken = getCookie('csrftoken');
        $.ajax({
            type: "POST",
            url: '/main/contact-us/',
            data: {
                email: contact_email.val(),
                name: contact_name.val(),
                message: contact_message.val()
            },
            success: function (result) {
                hideSpinner();
                resetForm();
                contact_form_success()
            },
            beforeSend: function (xhr, settings) {
                showSpinner();
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            },
            error: function (data) {
                hideSpinner();
                let errors = null;
                if (typeof data.responseJSON !== "undefined") {
                    errors = data.responseJSON;
                }
                contact_form_error(errors)
            }
        })
    });

});

我认为如下：

def contact_us(request):
    if request.method == 'POST':
        contact_us_form = ContactUsForm(request.POST)
        if contact_us_form.is_valid():

            name = contact_us_form.cleaned_data['name']
            email = contact_us_form.cleaned_data['email']
            message = contact_us_form.cleaned_data['message']

            try:
                subject = '[WEB] A customer sent you a message'
                body = render_to_string('contact_email.html', {'name': name, 'email': email, 'message': message})
                from_email = 'web@bemiddelingscenter.com'
                to_emails = MAIN_MAIL

                msg = EmailMultiAlternatives(subject, body, from_email, to_emails)
                msg.content_subtype = "html"  # Main content is now text/html
                msg.mixed_subtype = 'related'

                msg.send()
                return HttpResponse(status=200)
            except:
                return HttpResponse(status=404)
        else:
            data = {
                "email_error_exists": len(contact_us_form['email'].errors) > 0,
                "name_error_exists": len(contact_us_form['name'].errors) > 0,
                "message_error_exists": len(contact_us_form['message'].errors) > 0,
            }
            return JsonResponse(data, status=404)

在我的html模板中，我的代码如下：

<form method="post">
    <div class="mb-3">
        <input id="contact-name" class="form-control g-brd-none g-brd-bottom g-brd-white g-brd-primary--focus g-color-white g-bg-transparent g-placeholder-gray-light-v5 rounded-0 g-py-13 g-px-0 mb-2"
               type="text" placeholder="Name">
    </div>

    <div class="mb-3">
        <input id="contact-email" class="form-control g-brd-none g-brd-bottom g-brd-white g-brd-primary--focus g-color-white g-bg-transparent g-placeholder-gray-light-v5 rounded-0 g-py-13 g-px-0 mb-2"
               type="email" placeholder="Email">
    </div>

    <div class="mb-4">
        <textarea id="contact-message"
                class="form-control g-brd-none g-brd-bottom g-brd-white g-brd-primary--focus g-color-white g-bg-transparent g-placeholder-gray-light-v5 g-resize-none rounded-0 g-py-13 g-px-0 mb-5"
                rows="5" placeholder="Message"></textarea>
    </div>

    <button id="contact-button"
            class="btn u-btn-primary g-bg-secondary g-color-primary g-color-white--hover g-bg-primary--hover g-font-weight-600 g-font-size-12 g-rounded-30 g-py-15 g-px-35"
            type="submit"
            role="button"
            title="{% trans "Send message" %}">
        <span id="btn-send-initial">{% trans "Send message" %}</span>
        <span id="btn-spinner-sending" class="hidden">
            {% trans "Sending" %} <img class="sending-spinner" src="/assets/img/loading.gif" style="width: 20px;" alt="{% trans "Loading" %}"
                                       title="{% trans "Loading" %}"/>
        </span>
    </button>



</form>

主应用程序中的urls.py如下：

urlpatterns = [
    url(r'^$', include('main.urls')),
    url(r'^main/', include('main.urls')),
    url(r'^admin/', admin.site.urls),

    # Languages
    url(r'^i18n/', include('django.conf.urls.i18n'), name='set_language'),
    url(r'^jsi18n/$', javascript_catalog, js_info_dict, name='javascript-catalog'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

在主应用程序中，urls.py如下：

urlpatterns = [
    url(r'^', index, name="index"),
    url(r'^contact-us/', contact_us, name="contact_us"),
]

但是问题是，每当我单击“发送”按钮时，我都会收到成功消息，但电子邮件未发送。

任何想法？

Answer 1

urlpatterns = [
   url(r'^$', index, name="index"),
   url(r'^contact-us/$', contact_us, name="contact_us"),
]