P
Pisych16 февраля 2023 г. 22:13

Помогите разобраться с 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
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Вам это нравится? Поделитесь в социальных сетях!

3
Evgenii Legotckoi
  • 17 февраля 2023 г. 8:26

Добрый день!
Проще всего использовать библиотеку jQuery для этих целей.

Здесь есть два ключевых момента:

  1. Настройка AJAX на использование CSRF токена
  2. Само использование jQuery ajax. В этой статье я использовал ajax для пагинации - гляньте эту статью, чтобы в кратце представить себе, как просто написать ajax запрос к бэкенду.

Но если вкратце, то использование ajax в jQuery происходит так

jQuery.ajax({
    url: "/url/",
    type: "POST",
    success: function (json) {
        // handle response
    });
    NSProject
    • 18 февраля 2023 г. 0:41

    На основе основе вашего кода я бы сделал немного по другому заменив метод на класс:

    #Создание категории
    
    class CategoryList(View):
       template_name = 'store/spr/SprList.html'
    
       def get(self, request):
          form = CategoryForm()
          unit = Category.objects.all()
          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'})
    
       def post(self, request):
             form = CategoryForm(request.POST or Null)
             if form.is_valid():
                form.save()
                return redirect('CategoryList')
                # return JsonResponse({'result': True }) Для работы с ajax без презагрузки страницы 
             # return JsonResponse({'result': False})
    

    В любом случае сервер должен возращать какой то ответ иначе если форма не сохранится то будет ошибка сервера 500 вроде бы.
    Так же js файл может быть реализован на ванильном js или же jquery. Лично я последнее время использую ванильный javascript, но тут уже дело выбора и того как удобно вам.
    Ваша отрендеринная форма будет иметь примерно такой вид :

    <form action="" method="post">
           <input type="hidden" name="csrfmiddlewaretoken" value='<--! Здесь будет сам токен -->'>
            <input type="text" name='title' id='id_title' value='<--! Тут будет хранится то что вы введёте -->'>
            </th>
    <th class="pt-4 border-secondary"> 
           <button type="submit" class="btn btn-primary btn btn-sm mb-3 pt-2 pb-2 " id='btn_category_add'>Добавить</button>
           <!-- Тег а это я так понимаю обновление -->
           <a href="<!-- Ваш урл -->" ><img src="/static/images/update.png" class="btnupdate"><a>
    </form>
    

    И соответственно уже ваш файл скрипта.

    // JavaScript
    let btn = document.getElementById('btn_category_add')
    let title = document.getElementById('id_title')
    let csrf = document.getElementsByName('csrfmiddlewaretoken');
    
    btn.addEventListener('click', (event)=>{
        event.preventDefault();
        form = new FormData()
        form.append('title', title)
        form.append('csrfmiddlewaretoken', csrf[0].value)
    
        // ajax 
        $.ajax({
            url: '/you url/',
            type: 'POST', 
            data: form,
            success: function(e){
                // Делаете то чно нужно с ответом
            }
        });
    
        // Axios нужно подключить библиотеку перед файлом вашего js
    
        axios.post('/you url/', form).then(response =>{
            //Выполняете нужные вам действия
        }).catch(response =>{
            //Сообщаете об ошибке или предпринимаете другие действия
        })
    
    })
    
    // JQuery
    
    $('#btn_category_add').on('click', function(event){
        event.preventDefault();
        title = $('#id_title').value
        let csrf = document.getElementsByName('csrfmiddlewaretoken');
    
        form = new FormData()
        form.append('title', event)
        form.append('csrfmiddlewaretoken', csrf[0].value)
    
        // ajax 
        $.ajax({
            url: '/you url/',
            type: 'POST', 
            data: form,
            success: function(e){
                // Делаете то чно нужно с ответом
            }
        });
    
        // Axios нужно подключить библиотеку перед файлом вашего js
    
        axios.post('/you url/', form).then(response =>{
            //Выполняете нужные вам действия
        }).catch(response =>{
            //Сообщаете об ошибке или предпринимаете другие действия
        })
    })
    

    В общем получится что то типа этого. Существует ещё fetch для отправки аякс запросов, н оя что то подумал его не указывать ибо синтаксис у него как и у обычного ajax, ибо они родственники.

      P
      • 18 февраля 2023 г. 0:46

      Большое спасибо! Буду

        Комментарии

        Только авторизованные пользователи могут публиковать комментарии.
        Пожалуйста, авторизуйтесь или зарегистрируйтесь
        AD

        C++ - Тест 004. Указатели, Массивы и Циклы

        • Результат:50баллов,
        • Очки рейтинга-4
        m
        • molni99
        • 26 октября 2024 г. 1:37

        C++ - Тест 004. Указатели, Массивы и Циклы

        • Результат:80баллов,
        • Очки рейтинга4
        m
        • molni99
        • 26 октября 2024 г. 1:29

        C++ - Тест 004. Указатели, Массивы и Циклы

        • Результат:20баллов,
        • Очки рейтинга-10
        Последние комментарии
        i
        innorwall13 ноября 2024 г. 23:03
        Как написать игру на Qt - Урок 3. Взаимодействие с другими объектами what is priligy tablets What happens during the LASIK surgery process
        i
        innorwall13 ноября 2024 г. 20:09
        Использование переменных объявленных в CMakeLists.txt внутри C++ файлов where can i buy priligy online safely Tom Platz How about things like we read about in the magazines like roid rage and does that really
        i
        innorwall11 ноября 2024 г. 22:12
        Django - Урок 055. Как написать функционал auto populate field Freckles because of several brand names retin a, atralin buy generic priligy
        i
        innorwall11 ноября 2024 г. 18:23
        QML - Урок 035. Использование перечислений в QML без C++ priligy cvs 24 Together with antibiotics such as amphotericin B 10, griseofulvin 11 and streptomycin 12, chloramphenicol 9 is in the World Health Organisation s List of Essential Medici…
        i
        innorwall11 ноября 2024 г. 15:50
        Qt/C++ - Урок 052. Кастомизация Qt Аудио плеера в стиле AIMP It decreases stress, supports hormone balance, and regulates and increases blood flow to the reproductive organs buy priligy online safe Promising data were reported in a PDX model re…
        Сейчас обсуждают на форуме
        i
        innorwall13 ноября 2024 г. 18:52
        добавить qlineseries в функции PMID 35774217 Free PMC article priligy cvs
        i
        innorwall11 ноября 2024 г. 10:55
        Всё ещё разбираюсь с кешем. priligy walgreens levitra dulcolax carbs The third ring was found to be made up of ultra relativistic electrons, which are also present in both the outer and inner rings
        9
        9Anonim25 октября 2024 г. 9:10
        Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…
        ИМ
        Игорь Максимов3 октября 2024 г. 4:05
        Реализация навигации по разделам Спасибо Евгений!

        Следите за нами в социальных сетях