Как передать параметры сортировки из чексбоксов на сервер Django Ajax

Имеется форма с 3мя chackbox (к примеру). Необходимо чтобы при нажатии на любой (или несколько) из них происходила фильтраци данных на сервере Django. Например, нажимаем 'Волгоград' и 'Урюпинск' выводятся художники из этих городов. Код перестает работать при добавлении метода ajax. Пулучается, по-моему тут 2 проблемы: работа метода Ajax и передача параметров на сервер Django.

Буду благодарна за любые дельные советы)

html (фрагмент)

<form class="myform">
   <input type="checkbox" name="city" value="Волгоград">Волгоград
   <input type="checkbox" name="city" value="Жирновск">Жирновск
   <input type="checkbox" name="city" value="Урюпинск">Урюпинск
</form>

JS (фрагмент)

var checkboxes = document.querySelectorAll("input[type=checkbox][name=city]");
let res = [];

checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function(e) {
    e.preventDefault();
    res = Array.from(checkboxes).filter(i => i.checked).map(i => i.value);
    json_res = JSON.stringify(res);
    console.log(json_res);

    var csrftoken = $("[name=csrfmiddlewaretoken]").val();

     $.ajax(
    {
        type:"POST",
        url: "{% url 'AptPersons' %}",
        headers:{
        "X-CSRFToken": csrftoken
        },
        cache: true,
        data: json_res,
        dataType : "json",
        success: function(response){
                showHtml(response);
        },
        error: function(response){
            $("#alert").text('Не работает');
        },
     })

  })
});

views.py (фрагмент)

@csrf_protect
def Apt_PerView(request):

    artPerson = sorted(ArtPerson.objects.all().order_by('name'), key=lambda x: random.random())

    if request.method == 'POST':
        if request.POST['action'] == 'sort_up':
            artPerson = ArtPerson.objects.order_by('-name').values() #РАБОТАЕТ
        elif request.POST['action'] == 'sort_down':
            artPerson = ArtPerson.objects.order_by('name').values() #РАБОТАЕТ
        elif request.POST.getlist('arr[]') == ['Волгоград', 'Жирновск']:
            artPerson = ArtPerson.objects.filter(city="Волгоград").values() | ArtPerson.objects.filter(city="Жирновск").values() #НЕ РАБОТАЕТ
        elif request.POST.getlist['arr[]'] == ['Урюпинск']:
            artPerson = ArtPerson.objects.filter(city="Урюпинск").values() #НЕ РАБОТАЕТ
        # И так далее, всего 8 вариантов
        names = []
        cities = []
        slugs = []
        statuses = []
        image_artpersons=[]
        for d in artPerson:
            names.append(d['name'])
            cities.append(d['city'])
            slugs.append(d['slug_ap'])
            statuses.append(d['status'])
            image_artpersons.append(d['image_artperson'])
        json_data = {
            "names": names,
            "cities": cities,
            "slugs": slugs,
            "statuses": statuses,
            "image_artpersons": image_artpersons
        }
        return JsonResponse(json_data)
    else:
        return render(request, 'NewApp/Apt_Per.html', {'map_ArtPerson': artPerson})

<form class="myform">
   <input type="checkbox" id="id-volg" name="city" value="Волгоград">Волгоград
   <input type="checkbox" id="id-jirn" name="city" value="Жирновск">Жирновск
   <input type="checkbox" id="id-uup" name="city" value="Урюпинск">Урюпинск
</form>

$.ajax({
    url: '/your/url/point',
    method: 'post',
    data: JSON.stringify({
        field1: $('#id-volg').is(':checked'),
        field2: $('#id-jirn').is(':checked'),
        field3: $('#id-uup').is(':checked'),
    }),
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    success: (response) => {
        // Do smth if success response (200, 201 e.t.c) 
    },
    error: (response) => {
        // Do smth if error response (400, 401, 403, 404, 50X e.t.c)
    }
})