Как отобразить значения атрибутов данных, запрашиваемых и удаляемых с помощью ajax-вызова в django

Я пытаюсь сделать запрос к базе данных на основе того, что пользователь нажал на странице, и отобразить полученные данные без обновления страницы. Для этого я использую ajax. Позвольте мне показать вам коды

html

<label for="landacq" class="civil-label">Land Acquisation Cases</label>
<input class="civil-category" type="radio" name="civil-cat" id="landacq" value="land acquisation" hidden>

<label for="sc" class="civil-label">Supreme Court</label>
<input class="civil-court" type="radio" name="civil-court" id="sc" value="supreme court" hidden>

<label for="limitation" class="civil-label">Limitation</label>
<input class="civil-law-type" type="radio" name="civil-law-type" id="limitation" value="limitation" hidden>

js


for (i = 0; i < lawTypeInput.length; i++) {
  lawTypeInput[i].addEventListener("click", (e) => {
    e.preventDefault();
    cat = civilCatval;
    court = civilCourtval;
    lawT = civillawTypeval;
    console.log("this is from ajax : ", cat, court, lawT);
    $.ajax({
      type: "POST",
      headers: { "X-CSRFToken": csrftoken },
      mode: "same-origin", // Do not send CSRF token to another domain.
      url: "civil",
      data: {
        "cat[]": civilCatval,
        "court[]": civilCourtval,
        "lawT[]": civillawTypeval,
      },
      success: function (query) {
        showCivilQ(query);
        // console.log(data);
      },
      error: function (error) {
        console.log(error);
      },
    });
  });
}

function showCivilQ(query) {
  q.textContent = query;
  console.log(query);
}

Например, если пользователь нажимает на кнопку радио в html, значения захватываются js-файлом и затем отправляются на указанный url в виде POST-запроса. Там эти значения используются для фильтрации базы данных и возврата объектов, как это

views.py

def civil_home(request):
    
    if request.is_ajax():
    
      get_cat = request.POST.get('cat[]')
      get_court = request.POST.get('court[]')
      get_lawT = request.POST.get('lawT[]')

      query = Citation.objects.filter(law_type__contains ='civil' ,sub_law_type__contains= get_cat, court_name__contains = get_court, law_category__contains = get_lawT)

      return HttpResponse(query)
    else:
      subuser = request.user

      subscription = UserSubscription.objects.filter(user = subuser, is_active = True)

      context = {
        'usersub': subscription,
      }
    

      return render(request, 'civil/civil_home.html', context)

Вот результат, который я получаю, который является правильным.

result of what I am getting

Мой вопрос в том, что эти объекты содержат атрибуты, имеющие некоторые значения, например, заголовок, примечание и т.д. Как я могу отобразить эти атрибуты в html, а не отображать имена объектов, как показано на картинке, например, название цитаты, заголовок цитаты и т.д.

Решением может быть возвращение объекта json вместо набора результатов query; поскольку Ajax хорошо работает с json

Нужна функция, которая переводит объект Citation в словарь (измените его на основе ваших реальных атрибутов). Все элементы должны быть переведены в строки (см. пример с датой)

def citation_as_dict(item):
    return {
        "attribute1": item.attribute1,
        "attribute2": item.attribute2,
        "date1":  item.date.strftime('%d/%m/%Y')
    }

Этот словарь должен быть переведен в json через import json пакет 

def civil_home(request):
    
    if request.is_ajax():
    
      get_cat = request.POST.get('cat[]')
      get_court = request.POST.get('court[]')
      get_lawT = request.POST.get('lawT[]')

      query = Citation.objects.filter(law_type__contains ='civil' ,sub_law_type__contains= get_cat, court_name__contains = get_court, law_category__contains = get_lawT)

      response_dict = [citation_as_dict(obj) for obj in query]
      response_json = json.dumps({"data": response_dict})
      return HttpResponse(response_json, content_type='application/json')

    else:
      subuser = request.user

      subscription = UserSubscription.objects.filter(user = subuser, is_active = True)

      context = {
        'usersub': subscription,
      }
    

      return render(request, 'civil/civil_home.html', context)

На вашей HTML странице вы должны иметь возможность разобрать ответ как обычный JSON объект

Я нашел другой способ сделать это, который также дает мне требуемые результаты.

Здесь я фильтрую значения запроса, а затем преобразовываю их в список и передаю в качестве JsonResponse views.py

def civil_home(request):
    
    if request.method == "POST" and request.is_ajax():
    
      get_cat = request.POST.get('cat[]')
      get_court = request.POST.get('court[]')
      get_lawT = request.POST.get('lawT[]')

      query = Citation.objects.values().filter(law_type__contains ='civil' ,sub_law_type__contains= get_cat, court_name__contains = get_court, law_category__contains = get_lawT)

      result = list(query)

      return JsonResponse({"status": "success", "result": result})
    
    else:
      subuser = request.user

      subscription = UserSubscription.objects.filter(user = subuser, is_active = True)

      context = {
        'usersub': subscription,
      }
    

      return render(request, 'civil/civil_home.html', context)

Затем я получаю ответ здесь и делаю итерации над ним, чтобы вывести атрибуты в html js


for (i = 0; i < lawTypeInput.length; i++) {
  lawTypeInput[i].addEventListener("click", (e) => {
    e.preventDefault();
    cat = civilCatval;
    court = civilCourtval;
    lawT = civillawTypeval;
    console.log("this is from ajax : ", cat, court, lawT);
    $.ajax({
      type: "POST",
      headers: { "X-CSRFToken": csrftoken },
      mode: "same-origin", // Do not send CSRF token to another domain.
      url: "civil",
      data: {
        "cat[]": civilCatval,
        "court[]": civilCourtval,
        "lawT[]": civillawTypeval,
      },
      success: function (response) {
        console.log(response.result);
        civilData = response.result;
        if ((response.status = "success")) {
          $("#queryResult").empty();
          for (i = 0; i < civilData.length; i++) {
            $("#queryResult").append(
              `
              <a href="">${civilData[i].title}</a>
              <p>${civilData[i].headnote}</p>
            `
            );
          }
        } else {
          $("#queryResult").empty();
          $("#queryResult").append(
            `
              <p>No Citations Found</p>
            `
          );
        }
      },
      error: function (error) {
        console.log(error);
      },
    });
  });
}

В верхней части html-страницы можно указать csrf_token, а затем передать его в заголовке, чтобы избежать конфликта.

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