Помогите разобраться с ajax...
Добрый день! Может кто нибудь помочь мне, дать простейщий пример работы с ajax? Я не прошу делать за меня весь проект, нужен только базовый пример для добавления записи в таблицу БЕЗ ПЕРЕЗАГРУЗКИ исходной страницы...
models:
# Категории class Category(models.Model): title = models.CharField(max_length=100, verbose_name='Наименование категории',unique=True) def __str__(self): return self.title
forms:
class CategoryForm(forms.ModelForm): class Meta: model = Category fields = ['title'] widgets = { 'title': forms.TextInput(attrs={'class':'form-control','style':'width:945px;'}), }
path('category/', CategoryList, name='CategoryList'),
view:
#Создание категории def CategoryList(request): unit = Category.objects.all() if request.method == 'POST': form = CategoryForm(request.POST) if form.is_valid(): form.save() return redirect("CategoryList") else: form=CategoryForm() return render(request,'store/spr/SprList.html',{'title':"Категории",'unit':unit,'form':form, 'btn_caption': 'Добавить', 'brd_class': 'border-secondary', 'btn_class':'btn-primary','pic_label': 'Категории', 'base_url': 'CategoryList', 'update_url': 'CategoryUpdate', 'delete_url': 'CategoryDelete'})
html:
{% extends 'store/menu.html' %} {% load static %} {% block DataArea %} <div class="row"> <div class="col-md-1 "><img src="{% static '/images/report.png' %}" class="miniature_sprav mt-1 ">{{pic_label}}</div> <div class="col-md-11 mx-auto shadow"> <table class="table shadow "> <thead> <tr> <th class="{{brd_class}}" > <form action="" method="post"> {% csrf_token %} {{ form.as_p}}</th> <th class="pt-4 {{brd_class}}"> <button type="submit" class="btn {{btn_class}} btn btn-sm mb-3 pt-2 pb-2 " >{{btn_caption}}</button> <a href="{% url base_url %}" ><img src="{% static '/images/update.png' %}" class="btnupdate"><a> </form> </th> </tr> </thead> </table> <div class="scrolltable"> <table class="table shadow table-bordered"> <tbody> {% for item in unit %} <tr> <td style="width:960px;"> <a href="{% url update_url item.pk %}" class=" text-dark ">{{item.title}}</a> </td> <td class="text-center"> <a href="{% url delete_url item.pk %}" class="lead text-dark "> <img src="{% static '/images/del.png' %}" class="miniature2"></td></a> </tr> {% endfor %} </tbody> </table> </div> </div> </div> {% endblock DataArea %}
Как тут ajax прикручивать? Мне не требуется именно на моем шаблоне, мне нужен просто пример, чтобы разобраться, простейшая страница с формой... Помогите, пожалуйста!
p.s. Примеры конечно искал, очень много различных вариантов, везде все по разному...
и еще вопрос - JQUERY надо отдельно подключать или она входит в Bootstrap? У меня версия 5.
Спасибо!
3
100
Вам це подобається? Поділіться в соціальних мережах!
- Останні коментарі
- AK24 квітня 2025 р. 12:04UPD: Переписал логику воспроизведения через стороннюю библиотеку BASS. Там выбрать можно
- AK01 квітня 2025 р. 11:41Добрый день. В данный момент работаю над проектом, где необходимо выводить звук из программы в определенное аудиоустройство (колонки, наушники, виртуальный кабель и т.д). Пишу на Qt5.12.12 поско…
- Тепер обговоріть на форумі
- DT14 квітня 2025 р. 15:38Всем привет! На Qt 6.8 MinGW пытаюсь сделать управление подключением WiFi из программы. Пока делаю поддержку Windows, но так же хочу в дальнейшем внедрить и поддержку Linux/MacOS. Для…
- f15 лютого 2025 р. 13:46Подскажите, пожалуйста! Как данный класс можно дополнить, чтобы созданные объекты можно было перемещать мышкой по сцене?
- Не запускается компьютер (точнее работает блок , но сам монитор вообще жесть)В общем я ничего с интернета не скачивала в последнее время. На компе никаких левых пр…
- Вопрос решен. Узнать QModelIndex элемента на который мы перетаскиваем другой элемент, можно с помощью функции indexAt(event->position().toPoint()) представления QTreeViev вызываемой в переопр…
Добрый день!
Проще всего использовать библиотеку jQuery для этих целей.
Здесь есть два ключевых момента:
Но если вкратце, то использование ajax в jQuery происходит так
На основе основе вашего кода я бы сделал немного по другому заменив метод на класс:
В любом случае сервер должен возращать какой то ответ иначе если форма не сохранится то будет ошибка сервера 500 вроде бы.
Так же js файл может быть реализован на ванильном js или же jquery. Лично я последнее время использую ванильный javascript, но тут уже дело выбора и того как удобно вам.
Ваша отрендеринная форма будет иметь примерно такой вид :
И соответственно уже ваш файл скрипта.
В общем получится что то типа этого. Существует ещё fetch для отправки аякс запросов, н оя что то подумал его не указывать ибо синтаксис у него как и у обычного ajax, ибо они родственники.
Большое спасибо! Буду