Как сделать форму обратной связи на ajax используя JS?

Question

[Александр Виноградов]

Много посмотрел в нете примеров, но везде какие-то полуфабрикаты.
В документации есть вот такой пример.
Что мне надо:

• клиент на чистом JS без дурацкого jQuery (уже достал этот костыль jQ тем, что почти везде примеры только на нём)
  
• представление только в виде классов, а не из функций.
  

Что есть у меня.
Рабочая форма обратной связи не ajax с переходом на другую страницу.
Но приведу кусок кода, где уже пытаюсь его переделывать.

view.py

from django.views.generic.edit import CreateView
from .models import Contact, Files
from .forms import ContactForm
from django import http
import pdb # pdb.set_trace()


class AjaxableResponseMixin:
    """
    Mixin to add AJAX support to a form.
    Must be used with an object-based FormView (e.g. CreateView)
    """
    def form_invalid(self, form):
        response = super().form_invalid(form)
        if self.request.is_ajax():
            return http.JsonResponse(form.errors, status=400)
        else:
            return response

    def form_valid(self, form):
        # We make sure to call the parent's form_valid() method because
        # it might do some processing (in the case of CreateView, it will
        # call form.save() for example).
        response = super().form_valid(form)
        if self.request.is_ajax():
            data = {
                'pk': self.object.pk,
            }
            return http.JsonResponse(data)
        else:
            return response


class ContactView(AjaxableResponseMixin, CreateView):
    model = Contact
    fields = ('name', 'phone', 'email', 'body')


# class ContactView(FormView):
#     form_class = ContactForm
#     template_name = 'contact/contact.html'
#     success_url = '#' # адрес страницы успеха отправки формы


#     def post(self, request, *args, **kwargs):
#         pdb.set_trace()
#         form_class = self.get_form_class()
#         form = self.get_form(form_class)
#         files = request.FILES.getlist('files')
#         if form.is_valid():
#             id = form.save().pk
#             contact = Contact.objects.get(pk=id)
#             if files:
#                 for f in files:
#                     fl = Files(contact=contact, file = f)
#                     fl.save()
#             data = {'message': 'Сообщение успешно отправлено.'}
#             return http.JsonResponse(data)                 #self.form_valid(form)
#         else:
#             return self.form_invalid(form)


class ContactSent(CreateView):
    pass

JS

function ajaxPOST(url, callback) {
  var request = new XMLHttpRequest();

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      callback(request.responseText);
    }
  };

  request.open("POST", url, true);
  request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
  request.send();
}

function send(obj) {
  url = obj.action;
  ajaxPOST(url, function(data) {
    alert(data);
  });
  return false;
}

index

<form class="tile contact" action="{% url 'contact_form' %}" method="POST" onsubmit="send(this)" enctype="multipart/form-data">
  {% csrf_token %}
<p> <input type="text" name="name" placeholder="Ваше имя" maxlength="50" class="form-control" id="id_name"></p>
<p> <input type="text" name="phone" placeholder="Номер телефона. Обязательно" maxlength="50" class="form-control" required id="id_phone"></p>
<p> <input type="text" name="email" placeholder="email" maxlength="50" class="form-control" id="id_email"></p>
<p> <textarea name="body" cols="40" rows="10" placeholder="Текст сообщения. Обязательно" class="form-control" required id="id_body">
</textarea></p>
<p> <input type="file" name="files" multiple class="form-control" id="id_files"></p>
  <button class="btn" type="submit">Отправить</button>
</form>

Comments

[Лариса .•º]

И в чем вопрос?

[Александр Виноградов]

Лариса, то, что есть у меня не работает.
А вопрос, есть ли нормальный пример, отвечающий моим критериям?

[AlexandrBirukov]

у меня вот такой код вполне работает без миксинов и тд, а что не работает можно узнать?

class MainPageView(FormView):
    template_name = 'shop/main_page.html'
    form_class = SubscribeForm
    success_url = 'you_subscribe'

    def form_valid(self, form):
        form.create_subscriber()
        return HttpResponse('Ok')

    def form_invalid(self, form):
        return HttpResponse(status=400)

[Александр Виноградов]

AlexandrBirukov, у меня тоже работает.
Я хочу через аякс отправлять, что бы не было перезагрузки страницы

[AlexandrBirukov]

Александр Виноградов, это для аякса и было, вы можете показать ошибку

[Александр Виноградов]

AlexandrBirukov, у меня не доделан JS - это первое.
Для начала надо frontend довести до ума.
Как я понимаю, т.к. отправка идёт ajax, то надо данные самому опаковать в переменную и отправить через request.send();

[AlexandrBirukov]

<form action="{% url 'shop:main_page' %}" id="mailing-form" method="post">
                {% csrf_token %}
                {% bootstrap_form form show_label=False show_help=False %}
                <button>{% trans "Подписаться" %}</button>
            </form>

const form = $('#mailing-form'),
        action = form.attr('action');

    form.on('submit', function (event) {
        event.preventDefault();
        $.ajax({
            url: action,
            data: form.serialize(),
            type: 'post',

            success: function () {
                какая-то логика
            },

            error: function (xhr, status, error) {
                какая-то логика
            }
        });
    })

Александр Виноградов, но это все на jquery с его костылями, я бы кстати и django на вашем месте не пользовался, на чистом python куда удобнее))

[Александр Виноградов]

AlexandrBirukov, таких примеров куча в сети.
А вот как то же самое на JS написать?
А называю jQ костылём, потому что 100 человек смогут на jQ такое написать, но не знают, как это же сделать на JS. Таким образом использование jQ ведёт к дегродации знаний. навыков.
Не хочу грузить большую библиотеку jQ ради пары действий.

[AlexandrBirukov]

Александр Виноградов, я подхожу к этому вопросу с позиции практичности, это быстрее, это проще поддерживать потом любому из ста человек, как правило на сайте требуется кроме аякса еще куча всего, bootstrap тот же использует jq, но вообще цель благородная ))

[Александр Виноградов]

AlexandrBirukov, так вы знаете, как этот на js сделать?
Например, вот этот кусок ищет submit и вешает ему событие. Я знаю, как в js это повторить, но не знаю, как сделать в js event.preventDefault(); при условии, что мы не вешаем событие на найденный id, а конкретно из формы вызываем функцию.

form.on('submit', function (event) {
        event.preventDefault();

[Оксана ...]

Александр Виноградов, jQuery отнюдь не костыль, а библиотека обеспечивающая в первую очередь кросс-браузерность. При ajax запросе кросс-браузерность - это ключевой момент, чтобы и хром, и firefox, и особенно ie во всех его вариациях поняли, чего вы от них ждете.