Помогите разобраться с 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
Вам це подобається? Поділіться в соціальних мережах!
- Останні пройшли тести
- АП09 березня 2025 р. 21:16
- Останні коментарі
- VP09 березня 2025 р. 16:14Здравствуйте! Я устанавливал Qt6 из исходников а также Qt Creator по отдельности. Все компоненты, связанные с разработкой для Android, установлены. Кроме одного... Когда пытаюсь скомпилиров…
- ИМ22 листопада 2024 р. 21:51Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
- Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
- Тепер обговоріть на форумі
- f15 лютого 2025 р. 13:46Подскажите, пожалуйста! Как данный класс можно дополнить, чтобы созданные объекты можно было перемещать мышкой по сцене?
- Не запускается компьютер (точнее работает блок , но сам монитор вообще жесть)В общем я ничего с интернета не скачивала в последнее время. На компе никаких левых пр…
- Вопрос решен. Узнать QModelIndex элемента на который мы перетаскиваем другой элемент, можно с помощью функции indexAt(event->position().toPoint()) представления QTreeViev вызываемой в переопр…
- Спасибо большое за помощь и простите за то что отнял время своей невнимательностью.
Добрый день!
Проще всего использовать библиотеку jQuery для этих целей.
Здесь есть два ключевых момента:
Но если вкратце, то использование ajax в jQuery происходит так
На основе основе вашего кода я бы сделал немного по другому заменив метод на класс:
В любом случае сервер должен возращать какой то ответ иначе если форма не сохранится то будет ошибка сервера 500 вроде бы.
Так же js файл может быть реализован на ванильном js или же jquery. Лично я последнее время использую ванильный javascript, но тут уже дело выбора и того как удобно вам.
Ваша отрендеринная форма будет иметь примерно такой вид :
И соответственно уже ваш файл скрипта.
В общем получится что то типа этого. Существует ещё fetch для отправки аякс запросов, н оя что то подумал его не указывать ибо синтаксис у него как и у обычного ajax, ибо они родственники.
Большое спасибо! Буду