Добавление данных в базу и обновление таблицы на странице

@InfServ · Регистрация: 27.08.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Пишу сайт (я новичок), использую Python + Django + HTML + CSS + Bootstrap + JS + JQuery.
Задача: хочу вызвать модальное окно по кнопке "Добавить", где нужно заполнить поля, нажать кнопку "Сохранить", данные нужно передать в БД и обновить таблицу на странице.
Подскажите, пожалуйста, как это можно реализовать?

@nocl1p · 22.02.2019, 11:21

1. Вызываете модальное окно.
2. Заполняете форму.
3. Посылаете POST запрос (с введенными вами данными) во вьюху, которая обрабатывает вашу страницу с таблицей.
4. Во вьюхе сохраняете данные (которые вы приняли с фронта) в базу.
Вроде все.

@InfServ · 22.02.2019, 11:25 **[ТС]**

Большое спасибо за ответ! Но если у меня несколько модальных окон?

И как во views.py получить данные, не обновляя страницы?..

@nocl1p · 22.02.2019, 11:40

Если вы не хотите обновлять страницу, то должны использовать AJAX. Что-то типа такого:

JavaScript
1
2
3
4
5
6
7
8
 $.ajax({
        type: "POST",
        url: "{% url 'some_table' %}",
        data: {'field1': 'value1', 'field2': 'value2'},
        success: function (result) {
            // Do something on success POST request.
        }
    });

"data" это body POST запроса в данном случае.

Добавлено через 5 минут
Вот тут нормальный пример: https://simpleisbetterthancomp... jango.html

Добавлено через 4 минуты
Вот еще неплохо написано: https://www.techiediaries.com/python-django-ajax/

@InfServ · 22.02.2019, 11:42 **[ТС]**

JavaScript
1
2
3
4
5
6
{text: "Сохранить", click: function() {
        $.post({
          url: '/ajax/',
          data: {'name': name, 'model': model, 'date': date, 'ip': ip, 'shop': {{shop.id}}}
        });
      }}, // сохранить данные

Python
1
url(r'^ajax/$', views.addDevice),

Python
1
2
3
4
5
6
7
8
9
10
11
12
def addDevice(request):
    if request.method == "POST":
        shop = request.POST.get("shop")
        device = AddDevice.objects.create(
        name=request.POST.get("name"),
        model=request.POST.get("model"),
        data_set=request.POST.get("data_set"),
        ip=request.POST.get("ip"),
        shop_id = Shop.objects.get(id=shop)
        )
        devices = Device.objects.all();
        return HttpResponse({"devices": devices})

Что-то не работает...

@nocl1p · 22.02.2019, 12:08

А что именно не работает? Какая ошибка? Принты сделайте во вьюхе. Покажите urls.py

Добавлено через 7 минут
Если с урлами все норм то должно работать как-то вот так:

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
from django.http import JsonResponse
 
 
def addDevice(request):
    if request.method == "POST":
        shop = request.POST.get("shop")
        params = {
            'name': request.POST.get("name"),
            'model': request.POST.get("model"),
            'data_set': request.POST.get("data_set"),
            'ip': request.POST.get("ip"),
            'shop_id': Shop.objects.get(id=shop)
        }
        device = AddDevice.objects.create(**params)
        devices = Device.objects.all()
        return JsonResponse({"devices": devices})
    return render(request, 'some-table.html')

JavaScript
1
2
3
4
5
6
7
8
9
{text: "Сохранить", click: function() {
        $.post({
          url: '/ajax/',
          data: {'name': name, 'model': model, 'date': date, 'ip': ip, 'shop': {{shop.id}}}
          success: function (result) {
            console.log(result.devices)
        }
        });
      }}, // сохранить данные

Добавлено через 15 минут

Python
1
url(r'^ajax/render-table/$', views.addDevice, name='render_table'),

JavaScript
1
2
3
4
5
6
7
8
9
{text: "Сохранить", click: function() {
        $.post({
          url: "{% url 'render_table' %}",
          data: {'name': name, 'model': model, 'date': date, 'ip': ip, 'shop': {{shop.id}}}
          success: function (result) {
            console.log(result.devices)
        }
        });
      }}, // сохранить данные

Не хардкодьте урлы.

@InfServ · 22.02.2019, 12:57 **[ТС]**

Благодарю за подсказку!

Такая вот ошибка:
Uncaught ReferenceError: model is not defined
at HTMLDivElement.click (1:118)
at HTMLButtonElement.<anonymous> (jquery-ui.min.js:11)
at HTMLButtonElement.dispatch (jquery.min.js:5)
at HTMLButtonElement.v.handle (jquery.min.js:5)

указывает на строку:

JavaScript
1
data: {'name': name, 'model': model, 'date': date, 'ip': ip, 'shop': {{shop.id}}}

@nocl1p · 22.02.2019, 13:02

Может нужно указать вот так:

JavaScript
1
data: {'name': name, 'model': {{ model }}, 'date': date, 'ip': ip, 'shop': {{shop.id}}}

?

Добавлено через 52 секунды
Я просто не видел контекста, поэтому точно не могу подсказать по этому поводу.Что такое model?

@InfServ · 22.02.2019, 13:07 **[ТС]**

После двоеточия name, model, date, ip, {{shop.id}} - это значения полей формы

Python
1
2
3
4
5
6
7
class AddDevice(forms.Form):
    name = forms.CharField(label="Название:", required=True)
    model_d = forms.CharField(label="Модель:", required=True)
    date = forms.DateField(label="Дата установки:", input_formats="d-m-Y")
    ip = forms.CharField(label="IP-адрес:", max_length="15", required=True)
    def __init__(self, *args, **kwargs):
        super(AddDevice, self).__init__(*args, **kwargs)

Я поди что-то неправильно делаю?

@nocl1p · 22.02.2019, 13:20

Когода происходит submit формы отправляйте $form.serialize():

JavaScript
1
data: $form.serialize()

Добавлено через 36 секунд
Таким образом в body попадут все поля формы

Добавлено через 2 минуты
Или же

JavaScript
1
data: new FormData(form)

@InfServ · 22.02.2019, 13:23 **[ТС]**

Вы очень добрый и отзывчивый! Счастья вам!

А я попробую сделать. В пн отпишусь.

@InfServ · 25.02.2019, 13:04 **[ТС]**

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

JavaScript
1
data: $form.serialize()

@nocl1p · 25.02.2019, 13:09

Как-то вот так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$("#add-form").on('submit', function(event) {
    event.preventDefault();
    var form = this;
    $.ajax({
        url: "{% url 'render_table' %}",
        method: "POST",
        data: $form.serialize(), // Так же можно попробовать  data: new FormData(form)
        success: function(result) {
            console.log(result.devices)
         }
    });
}

@InfServ · 25.02.2019, 13:36 **[ТС]**

Делала так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
{text: "Сохранить", click: function(event) {
        event.preventDefault();
        //var form = this;
        $.ajax({
          method: "POST",
          url: "{% url 'render_table' %}",
          data: $('form').serialize(),
          success: function (result) {
            console.log(result.devices)
          }
        });
      }}, // сохранить данные

Не получается. Ошибка:
POST http://127.0.0.1:8000/ajax/render-table/ 500 (Internal Server Error)

@nocl1p · 25.02.2019, 13:42

500 (Internal Server Error): это ошибка на бекэнде. Что на бекэнде пишет? Какая там ошибка?

Добавлено через 2 минуты
Плюс ваша JS конструкция не внушает доверия. Не обрабатывайте onclick, обрабатывайте onsubmit. Я же пример написал.

Добавлено через 1 минуту
только селектором для onsubmit будет не кнопка, а форма, которую собственно вам и нужно отправить на бекэнд.

@InfServ · 26.02.2019, 12:49 **[ТС]**

А где бэкенд находится? Посмотреть бы пошагово, что и как выполняется.

@nocl1p · 26.02.2019, 12:54

Ну бекэнд это django приложение

Добавлено через 46 секунд
В вашем случае

Добавлено через 2 минуты
Ваш аякс запрос вызывает вьюху которая обрабатывает вот этот урл

JavaScript
1
{% url 'render_table' %}

. Вот в этой вьюхе выскакивает ошибка. В консоли должно же быть видно.

@InfServ · 27.02.2019, 12:35 **[ТС]**

Теперь вот какая ошибка: POST http://127.0.0.1:8000/ajax/render-table/ 403 (Forbidden)

Ему не нравится мой url или view? Или...

@nocl1p · 27.02.2019, 13:34

Так, окей. Я хочу посмотреть на urls.py, views.py, models.py и шаблон.

@InfServ · 27.02.2019, 13:43 **[ТС]**

views.py

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
def addDevice(request):
    if request.method == "POST":
        shop = request.POST.get("shop")
        device = Device.objects.create(
            name = request.POST.get("name"),
            model_d = request.POST.get("model_d"),
            data_set = request.POST.get("data_set"),
            ip = request.POST.get("ip"),
            shop_id = Shop.objects.get(id = shop)
        )
        devices = Device.objects.all();
        return JsonResponse({"devices": devices})
    return render(request, 'about_shop.html')

urls.py

Python
1
2
3
4
5
6
7
8
urlpatterns = [
    url(r'^js_jq/$', views.js_jq),
    url(r'^ajax/render-table/$', views.addDevice, name='render_table'),
    url(r'^aboutshop/(?P<pk>\d+)$', views.aboutshop),
    url(r'^deleteIssue/(?P<pk>\d+)', views.delete),
    url(r'^addIssue/$', views.addIssue, name="addIssue"),
    url(r'^$', views.index, name='index'),
]

model.py

Python
1
2
3
4
5
6
class Device(models.Model):
    name = models.CharField(max_length=100)
    model = models.CharField(max_length=100)
    data_set = models.DateField()
    ip = models.CharField(max_length=15)
    shop = models.ForeignKey(Shop, on_delete = models.CASCADE)

about_shop.html
выше идут таблички с данными (с других таблиц, все отображается)
а ниже я хочу по кнопке вызвать модальное окно, через которое я буду добавлять оборудование

HTML5
1
2
3
4
<h3>Оборудование</h3>
  {% block js %}
    {% include "firstApp/includes/js_adddevice.html" %}
  {% endblock js %}

js_adddevice.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="dialog">
  <form method="post"   onsubmit="return false">
    {% csrf_token %}
    <table>
      {{ adform.as_table }}
    </table>
    <br>
    <input type="submit" id="add_d" value="Сохранить">
    <button type="button" id="close_d" name="button">close</button>
    <input type="button" id="close" value="Закрыть">
  </form>
</div>
<button id="B_open">ДОБАВИТЬ</button>

а тут, собственно, у меня "каша"

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('#B_open').button().click(function(e) {
      $('#dialog').dialog("open")
    });
 
    $('#close').on('click', function(){
            $(this).dialog("close");
        });
$("#add_d").click(function(e){
      alert("1");
      e.preventDefault();
      var form = $(this);
      $.ajax({
        url: "{% url 'render_table' %}",
        method: "POST",
        data: form.serialize() + "&name=name&model=model&date=date&ip=ip&shop={{shop.id}}",
        success: function (result) {
          console.log(result.devices)
        }
      });
    });

Кстати, на ваше замечание

Плюс ваша JS конструкция не внушает доверия. Не обрабатывайте onclick, обрабатывайте onsubmit. Я же пример написал.

он ругается и работает alert() на .click(). А что ниже написано, там ошибка

POST http://127.0.0.1:8000/ajax/render-table/ 403 (Forbidden)

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

@InfServ 0 / 0 / 0 Регистрация: 27.08.2018 Сообщений: 19

	Добавление данных в базу и обновление таблицы на странице 22.02.2019, 10:25. Показов 22671. Ответов 35 Метки ajax, go, модальное окно (Все метки) Здравствуйте! Пишу сайт (я новичок), использую Python + Django + HTML + CSS + Bootstrap + JS + JQuery. Задача: хочу вызвать модальное окно по кнопке "Добавить", где нужно заполнить поля, нажать кнопку "Сохранить", данные нужно передать в БД и обновить таблицу на странице. Подскажите, пожалуйста, как это можно реализовать? 0

@nocl1p 55 / 38 / 20 Регистрация: 30.03.2012 Сообщений: 330
	22.02.2019, 11:21
	1. Вызываете модальное окно. 2. Заполняете форму. 3. Посылаете POST запрос (с введенными вами данными) во вьюху, которая обрабатывает вашу страницу с таблицей. 4. Во вьюхе сохраняете данные (которые вы приняли с фронта) в базу. Вроде все. 1

@InfServ 0 / 0 / 0 Регистрация: 27.08.2018 Сообщений: 19
	22.02.2019, 11:25 [ТС]
	Большое спасибо за ответ! Но если у меня несколько модальных окон? И как во views.py получить данные, не обновляя страницы?.. 0

@InfServ 0 / 0 / 0 Регистрация: 27.08.2018 Сообщений: 19
	22.02.2019, 13:23 [ТС]
	Вы очень добрый и отзывчивый! Счастья вам! А я попробую сделать. В пн отпишусь. 0

@nocl1p 55 / 38 / 20 Регистрация: 30.03.2012 Сообщений: 330
	25.02.2019, 13:42
	500 (Internal Server Error): это ошибка на бекэнде. Что на бекэнде пишет? Какая там ошибка? Добавлено через 2 минуты Плюс ваша JS конструкция не внушает доверия. Не обрабатывайте onclick, обрабатывайте onsubmit. Я же пример написал. Добавлено через 1 минуту только селектором для onsubmit будет не кнопка, а форма, которую собственно вам и нужно отправить на бекэнд. 1

@InfServ 0 / 0 / 0 Регистрация: 27.08.2018 Сообщений: 19
	26.02.2019, 12:49 [ТС]
	А где бэкенд находится? Посмотреть бы пошагово, что и как выполняется. 0

@InfServ 0 / 0 / 0 Регистрация: 27.08.2018 Сообщений: 19
	27.02.2019, 12:35 [ТС]
	Теперь вот какая ошибка: POST http://127.0.0.1:8000/ajax/render-table/ 403 (Forbidden) Ему не нравится мой url или view? Или... 0

@nocl1p 55 / 38 / 20 Регистрация: 30.03.2012 Сообщений: 330
	27.02.2019, 13:34
	Так, окей. Я хочу посмотреть на urls.py, views.py, models.py и шаблон. 0