Как вывести отфильтрованные данные с помощью django и ajax

Я очень новичок в AJAX и JQuery.

Итак, моя проблема заключается в следующем: Я хочу показать отфильтрованный список модели django под названием "Recipe", когда пользователь нажимает на чекбокс, но я не знаю, как передать данные в ajax, чтобы он перезагрузил их правильно

например:

На главной странице у меня есть список рецептов, в котором отображаются все рецепты. и рядом с ним находится боковая панель фильтров, где пользователь может отметить несколько флажков в нескольких категориях, чтобы отфильтровать данные в соответствии с введенными данными. Но я не знаю, как передать данные в представлениях так, чтобы ajax загрузил их на страницу. Буду признателен за любую помощь!

Вот мой код:

views.py

# filter recipes
def filter_recipes(request):
    print(request)
    recipes = Recipe.objects.all()
    diff = request.GET.getlist("difficulty[]")
    
    if len(diff) > 0:
        filtered = recipes.filter(difficulty__in=diff)
        print(f"recipes =============== {filtered}" )
        
    ajax = render_to_string("ajax/recipes_list.html", {"data": filtered})
    return JsonResponse({"data": ajax})

<!--  JQuery script in landing_page.html-->
<script>
  $(document).ready(function () {
    $(".ajax-loader").hide();
    // start of filter by value
    $(".form-check-input").on("click", function () {
      let _filterObj = {};
      $(".form-check-input").each(function (index, element) {
        let _filterValue = $(this).val();
        let _filterKey = $(this).data("filter");
        _filterObj[_filterKey] = Array.from(
          document.querySelectorAll(
            "input[data-filter=" + _filterKey + "]:checked"
          )
        ).map(function (el) {
          console.log(el.value);
          return el.value;
        });
      });
      console.log(_filterObj);

      // run ajax
      $.ajax({
        url: "filter-recipes/",
        data: _filterObj,
        dataType: "json",
        beforeSend: function () {
          $(".ajax-loader").show();
        },

        success: function (res) {
          console.log(res);
          $("#filter-recipes").html(res.data);
          $(".ajax-loader").hide();
        },
      });
    });
  });
</script>

Вернуться на верх