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

@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 **[ТС]**

Спасибо!!!

Новые блоги и статьи Все статьи Все блоги /
Про "Windows must die!" kumehtar 04.11.2026 Знаете, чет накатило. . . . Когда-то это было почти боевым кличем: мол, нормальный человек сидит на DOS, OS/ 2 или Linux, а вот это вот - Must Die. А теперь человек произносит «мастдай» с усмешкой - и. . .	Красочные поля с номером страницы svg+background-image russiannick 04.11.2026 Красочные поля с номером страницы не менее важны чем в эпоху бумажных книг. Посему спешу представить почтеннейшей публике этот важный инструмент который эти поля и формирует. В процессе разработки. . .	Вступаем в новую фазу генерации favicons, векторную. russiannick 02.11.2026 Теперь нет нужды скрывать что используется простой svg. Исходный код изображения помещаем в поле и жмем кнопку. Исходник преобразуется в вид корректный для помещения в favicon или в url(). Нажатие. . .	Генератор паролей (вариант №4) Maks 01.11.2026 После публикации 3-го варианта генератора паролей, разослал его своим коллегам (с целью оценки), в итоге были получены следующие рекомендации: 1. Вернуть возможность использования знаков \| 1 l I;. . .
Генератор паролей (вариант №3) Maks 30.10.2026 Финальная версия генератора паролей 1С. Доработка решения в этот раз коснулась только визуальной части, а именно, добавлен реквизит ДопПараметры (тип Булево), который скрывает/ отображает реквизиты:. . .	Магическое мышление и магия, современная наука не отличима от магии (говорит ИИ Джемени) zorxor 30.10.2026 Джемени, расскажи, пожалуйста, что такое магическое мышление, что такое магия, почему современная наука чем-то напоминает магию? Фраза «Любая достаточно развитая технология неотличима от магии». . .	За какое время ИИ может подобрать пароль по хешу (рассказывает Джемени ИИ) zorxor 30.10.2026 Расскажи, Джемени, если известен хэш МД5, например, за сколько ИИ сможет подобрать соответствующий пароль? Искусственный интеллект (ИИ) может подобрать простой или средний по сложности пароль по. . .	Кто убил Suno? Почему наше солнышко погасло? (диалог с ИИ Джемени) zorxor 30.10.2026 Как убивали Suno. Хронология. «Убийство» музыкальной нейросети Suno — это затяжной процесс, в котором технологический хайп стартапа разбился о жесткую реальность судебных исков от гигантов. . .

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

Решение

Решение

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

	Добавление данных в базу и обновление таблицы на странице 22.02.2019, 10:25. Показов 23011. Ответов 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