Помогите разобраться с ajax...

# Категории
class Category(models.Model):
    title = models.CharField(max_length=100, verbose_name='Наименование категории',unique=True)

    def __str__(self):
        return self.title

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'),

#Создание категории
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'})

{% 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 %}

Рекомендуем хостинг TIMEWEB

Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

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

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

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

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

jQuery.ajax({
    url: "/url/",
    type: "POST",
    success: function (json) {
        // handle response
    });

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

#Создание категории

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, ибо они родственники.

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