Отправка HTML-формы Django с помощью Ajax

ProgramBox

Отправка HTML-формы Django с помощью Ajax

Post author:admin
Запись опубликована:25 октября, 2022
Post category:Вопросы по программированию

#javascript #jquery #python-3.x #django #ajax

Вопрос:

Это моя первая попытка отправить форму с помощью 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>

Для отображения сообщения после отправки формы зарезервировано значение is.

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-тег, который мне нужен.

1. Ваш csrf-токен является буквальным, в нем отсутствует кавычка. Так и должно быть '{{csrf_token}}' . И запятая после этого тоже отсутствует.

2. Спасибо. Это исправлено, но главная проблема не решена.

3. Ваш JS выглядит корректно, не уверен, в чем может быть ваша проблема, можете ли вы проверить свою консоль на наличие ошибок JS, а также проверить вкладку сеть, если api не возвращает никаких ошибок. Кроме того, вы можете проверить свой терминал django на наличие каких-либо ошибок.

4. Я проверил консоль и обнаружил одну ошибку: «Неожиданный идентификатор», и она ссылается на строку скрипта: url: «/ sendmessage /». Я понятия не имею, что с этим не так.

5. вы пропустили запятые после type: "POST", и url : "/sendmessage/", , добавьте их, и это должно сработать.

Ответ №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>