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

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

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

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

@nocl1p · 27.02.2019, 13:49

data: form.serialize() + "&name=name&model=model&date=date&ip=ip& shop={{shop.id}}"
Что это?
Импользуйте просто data: form.serialize()

Добавлено через 1 минуту
Покажите код формы которая отправляет POST запрос

Добавлено через 1 минуту
Повторюсь еще раз. Нужно обрабатывать событие onsubmit формы.

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 · 28.02.2019, 11:34 **[ТС]**

Он мне в консоли выдает ошибку:
Forbidden (CSRF token missing or incorrect.): /ajax/render-table/

Насчет этого:

data: form.serialize() + "&name=name&model=model&date=date&ip=ip& shop={{shop.id}}"

Это я писала, потому что предполагала, что проблема в этом (на форумах так рекомендовали другим). Но если я оставлю только "form.serialize()" ошибка останется.
Теперь я думаю, что здесь надо какую-то защиту дописать

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')

Добавлено через 1 час 4 минуты
Нет, все-таки проблема в JS. До views.py он еще не доходит. Да даже не доходит до:

JavaScript
1
2
3
success: function(result) {
            console.log(result.devices) //alert("123");
         }

Добавлено через 27 минут
Я все поняла. Ошибка была в этом:

JavaScript
1
var form = this;

Поменяла на:

JavaScript
1
var form = $('#add_device');

Код формы, которая отправляет POST запрос:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="dialog">
  <form method="post"   onsubmit="return false" id="add_device">
    {% csrf_token %}
      <table>
        {{ adform.as_table }}
      </table>
    <br>
    <input type="submit" id="add_d" value="Сохранить">
    <input type="button" id="close" value="Закрыть">
  </form>
</div>

Теперь ошибка в другом. Как мне передать в функцию id_shop? Страница уже открыта ('/aboutshop/1'). Когда обрабатывается запрос:

JavaScript
1
url: "{% url 'render_table' %}",

URL меняется ('/aboutshop/1/ajax/render_table' насколько я понимаю) и id_shop просто так не получить. Как же получить id_shop?

Добавлено через 2 часа 39 минут
Вы писали все правильно:

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)
         }
    });
}

Благодарю!!!
Просто такая путаница получилась. Но благо, я все поняла, переделала. Другая проблема появилась: как получить id_shop (shop_id).

@nocl1p · 28.02.2019, 15:59

Я рад, что у вас получается

По поводу shop_id, вам его где надо получить?

Добавлено через 1 час 21 минуту
Чтобы получить в шаблоне нужно чтобы вьюха отдавала контекст:

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', {'shop': shop})

@InfServ · 01.03.2019, 06:30 **[ТС]**

Спасибо вам

Мне надо получить shop_id, когда сохраняю инфу с модального окна. Потому что вся информация (name, model, date_set, ip) относится к магазину.
Как будто надо здесь как-то обыграть:

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
def addDevice(request, pk): #может здесь pk получить?
    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')

Раньше получала shop_id через:

Python
1
url(r'^aboutshop/(?P<pk>\d+)$', views.aboutshop)

А теперь получается, что мой урл будет '/aboutshop/1/ajax/render_table'
Вот и вопрос: как же получить shop_id?

@nocl1p · 01.03.2019, 10:55

Я наверно немного не понимаю, у вас же shop_id отправляется постом во вьюху

Python
1
2
if request.method == "POST":
    shop = request.POST.get("shop")

@InfServ · 01.03.2019, 12:08 **[ТС]**

nocl1p, Извините, наверно, плохо объяснила.
Это неправильно. Должно быть как-то так:

Python
1
2
3
4
5
6
7
8
9
10
11
12
def addDevice(request, pk): #может здесь pk получить?
    if request.method == "POST":
        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 = pk
        )
        devices = Device.objects.all();
        return JsonResponse({"devices": devices})
    return render(request, 'about_shop.html')

Т.е. эта функция должна сохранять новое оборудование с известным shop_id из "/aboutshop/1/" (pk=1). Просто когда я заполню информацию в модальном окне и нажму сохранить, ссылка у меня станет "/aboutshop/1/ajax/render_table". А мне эту "1" (или любую другую цифру) надо передать в "def addDevice".

@nocl1p · 01.03.2019, 12:24

Вы же можете внутри шаблона узнать какой shop_id вам нужен:

Python
1
url(r'^ajax/render-table/(?P<shop_id>\d+)$', views.addDevice, name='render_table'),

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' <your_shop_id> %}", // Например url: "{% url 'render_table' 5 %}"
        method: "POST",
        data: $form.serialize(), // Так же можно попробовать  data: new FormData(form)
        success: function(result) {
            console.log(result.devices)
         }
    });
}

Python
1
2
3
4
5
6
7
8
9
10
11
12
def addDevice(request, shop_id): # Вот сюда будет передан shop_id из ajax
    if request.method == "POST":
        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_id
        )
        devices = Device.objects.all();
        return JsonResponse({"devices": devices})
    return render(request, 'about_shop.html')

Пока что я это так понимаю. Потому как не вижу всей логики проекта.

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

Вооот... я также делала (на форумах почитала):

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
$("#add_device").on('submit', function(event) {
      alert("test");
      event.preventDefault();
      var form = $(this);
      $.ajax({
        url: "{% url 'render_table' {{shop.id}} %}",
        method: "POST",
        data: form.serialize(),
        success: function (result) {
          console.log(result.devices)
        }
      });
    });

Только он мне ошибку выдает:

Could not parse the remainder: '{{shop.id}}' from '{{shop.id}}'

@nocl1p · 01.03.2019, 12:51

JavaScript
1
url: "{% url 'render_table' shop.id %}"

@InfServ · 01.03.2019, 13:05 **[ТС]**

УРА! Спасибо, спасибо!!!

Он не ругается, но теперь выдает другую ошибку, хотя все поля заполнены:

IntegrityError: NOT NULL constraint failed: firstapp_device.model

И требует, чтобы я дату указывала, хотя в БД может быть NULL.

@nocl1p · 01.03.2019, 13:16

Что вот это такое firstapp_device.model?
Я ж не могу читать удаленно

Добавлено через 3 минуты
Хотя, смотрите, вы добавляете объект данной модели:

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)

И посмотрите что вы творите вот тут:

Python
1
2
3
4
5
6
7
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_id
        )

Ничего вас не смущает?

Добавлено через 3 минуты
Поле model не заполняется и оно не помечено как null = True поэтому и ошибка (оно не может быть пустым). Наверно вот так вот надо:

Python
1
model = request.POST.get("model_d"),

@InfServ · 01.03.2019, 13:26 **[ТС]**

Мда... Увидела, изменила) Другая ошибка:

TypeError: <QuerySet [<Device: Device object (1)>]> is not JSON serializable

А насчет firstapp_device.model это:

@nocl1p · 01.03.2019, 13:48

Вот так попробуйте во вьюхе написать:

Python
1
2
devices = Device.objects.values('name', 'model', 'data_set', 'ip', 'shop_id');
devices = list(devices)

Если не поможет то вот так:

Python
1
2
devices = Device.objects.all()
devices = [{'name': item.name, 'model': item.model, 'data_set': item.data_set, 'ip': item.ip, 'shop_id': item.shop_id} for item in devices]

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

Python
1
2
3
from django.core.serializers import serialize
 
devices = serialize('json', Device.objects.all())

@InfServ · 01.03.2019, 14:05 **[ТС]**

Я сразу решила применить это:

Python
1
2
3
from django.core.serializers import serialize
 
devices = serialize('json', Device.objects.all())

Заработало!!!

Только наплодило мне...
P.S.: хотя сейчас проверила, сама виновата

Только проблема осталась с датой, если я ее не введу, то ошибку выдаст. Сделала по вашему замечанию:

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

@nocl1p · 01.03.2019, 14:07

Работает - это уже успех

@InfServ · 01.03.2019, 14:20 **[ТС]**

Спасибо!!!

Новые блоги и статьи Все статьи Все блоги /
Нейросеть на алгоритме "эстафета хвоста" как перспектива. Hrethgir 06.05.2026 На десерт, когда запущу сервер. Статья тут https:/ / habr. com/ ru/ articles/ 1030914/ . Автор я сам, нейросеть только помогает в вопросах которые мне не известны - не знаю людей которые знали-бы. . .	Асинхронный приём данных из COM-порта Argus19 01.05.2026 Асинхронный приём данных из COM-порта Купил на aliexpress термопринтер QR701. Он оказался странным. Поключил к Arduino Nano. Был очень удивлён. Наотрез отказывается печатать русские буквы. Чтобы. . .	попытка написать игровой сервер на C++ pyirrlicht 29.04.2026 попытка написать игровой сервер на плюсах с открытым бесконечным миром. возможно получится прикрутить интерпретатор питон для кастомизации игровой логики. что есть на текущий момент:. . .	Контроль уникальности выбранного документа-основания при изменении реквизита Maks 28.04.2026 Алгоритм из решения ниже разработан на примере нетипового документа "ЗаявкаНаРемонтСпецтехники", разработанного в КА2. Задача: уведомлять пользователя, если указанная заявка (документ-основание). . .
Благородство как наказание Maks 24.04.2026 У хорошего человека отношения с женщинами всегда складываются трудно. А я человек хороший. Заявляю без тени смущения, потому что гордиться тут нечем. От хорошего человека ждут соответствующего. . .	Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .

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

Решение

Решение

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

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

@nocl1p 55 / 38 / 20 Регистрация: 30.03.2012 Сообщений: 330
	01.03.2019, 14:07
	Работает - это уже успех 1

@InfServ 0 / 0 / 0 Регистрация: 27.08.2018 Сообщений: 19
	01.03.2019, 14:20 [ТС]
	Спасибо!!! 0