Помогите разобраться с 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.
Спасибо!
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.Вам это нравится? Поделитесь в социальных сетях!
Комментарии
Пожалуйста, авторизуйтесь или зарегистрируйтесь
- Akiv Doros
- 11 ноября 2024 г. 14:58
C++ - Тест 004. Указатели, Массивы и Циклы
- Результат:50баллов,
- Очки рейтинга-4
- molni99
- 26 октября 2024 г. 1:37
C++ - Тест 004. Указатели, Массивы и Циклы
- Результат:80баллов,
- Очки рейтинга4
- molni99
- 26 октября 2024 г. 1:29
C++ - Тест 004. Указатели, Массивы и Циклы
- Результат:20баллов,
- Очки рейтинга-10
Добрый день!
Проще всего использовать библиотеку jQuery для этих целей.
Здесь есть два ключевых момента:
Но если вкратце, то использование ajax в jQuery происходит так
На основе основе вашего кода я бы сделал немного по другому заменив метод на класс:
В любом случае сервер должен возращать какой то ответ иначе если форма не сохранится то будет ошибка сервера 500 вроде бы.
Так же js файл может быть реализован на ванильном js или же jquery. Лично я последнее время использую ванильный javascript, но тут уже дело выбора и того как удобно вам.
Ваша отрендеринная форма будет иметь примерно такой вид :
И соответственно уже ваш файл скрипта.
В общем получится что то типа этого. Существует ещё fetch для отправки аякс запросов, н оя что то подумал его не указывать ибо синтаксис у него как и у обычного ajax, ибо они родственники.
Большое спасибо! Буду