Как обновить страницу через AJAX в DJANGO?

Question

[nurzhannogerbek]

Здравствуйте! Помогите пожалуйста разобраться.

На странице есть модальное окно с формой для добавления новой книги. После успешного добавления новой книги нужно через AJAX обновить блок со списком книг на странице. Как это реализовать используя CBV и подскажите как правильно должен выглядеть AJAX запрос?

models.py:

class Book(models.Model):
    header = models.CharField(max_length=200, help_text='Заголовок', blank=False,)
    description = models.TextField(help_text='Описание', blank=False,)

forms.py:

class BookForm(forms.ModelForm):
    class Meta:
        model = Book
        fields = '__all__'

views.py:

class DashboardView(View):
    template_name = "dashboard.html"

    def get_context_data(self, **kwargs):
        context = super(DashboardView, self).get_context_data(**kwargs)
        context['books'] = Books.objects.all()

    def post(self, request):
        create_form = BookForm(request.POST)
        if create_form.is_valid():
            create_form.save()
            ???

dashboard.html:

{% include ''books.html' %}

<div id="bookCreateModalBox" class="modal fade">
    <div class="modal-body">
        <form action="" method="post">
            {% csrf_token %}
            {{ create_form.as_p }}
            <input type="submit" value="">
        </form>
    </div>
</div>

Answer 1

[tema_sun]

Во вьюшке:

def post(self, request):
        create_form = BookForm(request.POST)
        if create_form.is_valid():
            create_form.save()
            
        response = {"data": "goes here"}

        return HttpResponse(json.dumps(response), content_type='application/json')

В js'e:

$.ajax({
    method: 'post',
    url: your-url,
    data:  serialized-data
}).done(function(response){
    console.log(response.data)
});

Ну или что-то аналогичное, если jquery не используете.

Comments

[nurzhannogerbek]

Здравствуйте! На основе нашего примера составил вьюху с мелкими изменениями, но вот не совсем уверен в правильности AJAX запроса. Можете проверить пожалуйста и сказать свое мнение.

urls.py:

url(r'^book/create/$', BookCreateView.as_view(), name='book_create'),

views.py:

class BookCreateView(View):
    def post(self, request):
        data = dict()
        book_create_form = BookCreateForm(request.POST)
        if book_create_form.is_valid():
            book_create_form.save()
            data['form_is_valid'] = True
            books= Book.objects.all()
            data['html_books'] = render_to_string('books.html', {
                'books': books
            })
        else:
            data['form_is_valid'] = False
        context = {'books': books}
        data['html_create_book_form'] = render_to_string('create_book.html', {
            context,
            request
        })
        return JsonResponse(data)

    def get(self, request):
        data = dict()
        book_create_form = BookCreateForm()
        context = {'book_create_form': book_create_form}
        data['html_create_book_form'] = render_to_string('create_book.html', {
            context,
            request
        })
        return JsonResponse(data)

dashboard.html:

<div id="books">
       {% include 'books.html' %}
</div>

<a id="bookCreateBtn" href="#bookCreateModalBox" class="btn btn-primary" data-toggle="modal">Добавить новую книгу</a>

<div id="bookCreateModalBox" class="modal fade">
       <div class="modal-dialog">
              <div class="modal-content">
	             <form method="post" action="{% url 'book_create' %}" class='bookCreateForm'>
		            {% csrf_token %}
		            <div class="modal-body">
			           {{ create_book_form }}
			    </div>
			    <div class="modal-footer">
			           <button type="submit" class="btn btn-primary">Создать</button>
			    </div>
	             </form>
              </div>
       </div>
</div>

JavaScript code:

$(document).ready(function(){
	$("#bookCreateBtn").click(function() {
		$("#bookCreateModalBox").modal('show');
	});
});

$("#bookCreateModalBox").on("submit", "#bookCreateForm", function () {
	var form = $(this);
	$.ajax({
		url: form.attr("action"),
		data: form.serialize(),
		type: form.attr("method"),
		dataType: 'json',
		success: function (data) {
			if (data.form_is_valid) {
				$("#books").html(data.html_books);
			}
			else {
				$("#bookCreateModalBox .modal-body").html(data.html_create_book_form);
			}
		}
	});
	return false;
});

[tema_sun]

Да вроде все так, и должно работать. Что смущает?

[nurzhannogerbek]

tema_sun: Изменил JS код немного и модальное окно открывается корректно теперь. Проблема во вьюхе. Выдает след. ошибку (см. ниже), после того как наживаю submit. Что можете посоветовать? Во вьюхе есть запись request, на которую ругается редактор.

JS:

$(function () {
	$("#bookCreateBtn").click(function () {
		$.ajax({
			beforeSend: function () {
				$("#bookCreateModalBox").modal("show");
			},
		});
	});
});

ERROR:

Traceback (most recent call last):
  File "/srv/envs/kaseAdmPy362/lib/python3.6/site-packages/django/core/handlers/exception.py", line 41, in inner
    response = get_response(request)
  File "/srv/envs/kaseAdmPy362/lib/python3.6/site-packages/django/core/handlers/base.py", line 187, in _get_response
    response = self.process_exception_by_middleware(e, request)
  File "/srv/envs/kaseAdmPy362/lib/python3.6/site-packages/django/core/handlers/base.py", line 185, in _get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "/srv/envs/kaseAdmPy362/lib/python3.6/site-packages/django/views/generic/base.py", line 68, in view
    return self.dispatch(request, *args, **kwargs)
  File "/srv/envs/kaseAdmPy362/lib/python3.6/site-packages/django/views/generic/base.py", line 88, in dispatch
    return handler(request, *args, **kwargs)
  File ".../views.py", line 26, in post
    request
TypeError: unhashable type: 'dict'

[nurzhannogerbek]

Нашел свои ошибки в коде. Вот эти строки должны выглядеть так:

data['html_book_create_form'] = render_to_string('create_book.html', context)

и

data['html_book_create_form'] = render_to_string('create_book.html', context, request=request)

Проблема теперь в том что после успешного submit в браузере появляется JSON, а не обновляется страница. Что делаю не так?

[nurzhannogerbek]

tema_sun: так же заметил что хоть и был успешный submit данные не сохраняются. Вообще запутался. =(

Пробовал так тоже, не помогли. Что можете посоветовать?

if book_create_form.is_valid():
   new_book = book_create_form.save(commit=False)
   new_book.save()

[nurzhannogerbek]

tema_sun: Вопрос решон. Все из-за моей невнимательности. В JS коде вместо класса указал id из за чего просто возвращал сырой джейсон. Сейчас страницу обновляет. Но у меня все равно есть маленький вопрос. После успешной отправки как очистить форму? Просто при повторном открытии модального окна в форме стоят предыдущие записи. Нужно в параметр success добавить что-то наподобии form[0].reset();?

Answer 2

[nofuture trustnoone]

По аяксу получаете серилизированные объекты и уже на фронте вставляете заново. Идеально для такой задачи чтто-то типа Vue заюзать, но для вас это может быть сложно и незачем.
После получки - десериализовать объекты и вставлять тупо jquery в список куда вам надо.

Comments

[nurzhannogerbek]

Можете привести маленький пример пожалуйста, если вам не трудно.

[nofuture trustnoone]

NogerbekNurzhan: append to list

ajax post

Для отправки формы нужно сериализовать форму
Как тут