如何在django中显示Ajax调用查询和检索的数据的属性值

Question

我正在尝试根据用户在页面上单击的内容查询数据库，并在不刷新页面的情况下显示它检索到的数据。我为此使用 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，作为 [=43] =] 请求。这些值用于过滤数据库和 return 像这样的 objects

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)

这是我得到的正确结果。

我的问题是这些 object 包含具有某些值的属性，例如标题、头注等。如何在 html 中显示这些属性而不是显示 object 名称 return 如图片所示，如引文标题、引文标题等

Answer 1

一个解决方案可能是return一个json对象而不是query结果集；因为 Ajax 与 json

配合得很好

您需要一个将 Citation 对象转换为字典的函数（根据您的实际属性更改它）。所有元素都必须翻译成字符串（参见日期示例）

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

这本词典必须通过import json包

翻译成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 对象

Answer 2

我想出了另一种方法，它也给了我所需的结果。

我在这里过滤查询的值，然后将其转换为列表并将其作为 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，然后在页眉中传递它以避免任何冲突。

如何在django中显示Ajax调用查询和检索的数据的属性值

How to display the values of the attributes of the data queried and retrieved by Ajax call in django

javascript

django

ajax