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
        Последние комментарии
        ИМ
        Игорь Максимов22 ноября 2024 г. 11:51
        Django - Урок 017. Кастомизированная страница авторизации на Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
        Evgenii Legotckoi
        Evgenii Legotckoi31 октября 2024 г. 14:37
        Django - Урок 064. Как написать расширение для Python Markdown Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
        A
        ALO1ZE19 октября 2024 г. 8:19
        Читалка fb3-файлов на Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
        ИМ
        Игорь Максимов5 октября 2024 г. 7:51
        Django - Урок 064. Как написать расширение для Python Markdown Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
        d
        dblas55 июля 2024 г. 11:02
        QML - Урок 016. База данных SQLite и работа с ней в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
        Сейчас обсуждают на форуме
        m
        moogo22 ноября 2024 г. 7:17
        Mosquito Spray System Effective Mosquito Systems for Backyard | Eco-Friendly Misting Control Device & Repellent Spray - Moogo ; Upgrade your backyard with our mosquito-repellent device! Our misters conce…
        Evgenii Legotckoi
        Evgenii Legotckoi24 июня 2024 г. 15:11
        добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
        t
        tonypeachey115 ноября 2024 г. 6:04
        google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
        NSProject
        NSProject4 июня 2022 г. 3:49
        Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…

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