如何根据用户提供的过滤值显示搜索结果？

Posted 2023-02-23

【中文标题】如何根据用户提供的过滤值显示搜索结果？

【英文标题】：How could i display search result based on filtered value provided by user?

【发布时间】：2016-05-28 18:29:43

【问题描述】：

我开发了过滤系统，它提供了 3 个选项，例如属性类型、房间数量和最高价格。每次他们选择过滤器选项时，用户都会立即获得他们的搜索结果。例如，如果用户选择物业类型为Apartment，房间数量为4，最高价格为12000，则用户将获得物业类型为Apartment 4 房间的12000 标记的租金。我使用 React.js 开发了前端部分，并且可以成功获取用户选择的数据。我也将数据传递给 ajax，但我不知道如何根据用户提供的过滤值显示搜索结果，而无需加载页面。

Ajax 代码

$.ajax(
  type: 'GET',
  url: '/filter/space/',
  dataproperty:propertySelectedValue, room:roomSelectedValue, price:maxPrice,
  success: function(data)
    console.log(data['fields']);
  ,
  error: function(XMLHttpRequest, textStatus, errorThrown)
    console.error("Status: " + textStatus); alert("Error: " + errorThrown);
  ,
);

Views.py

class FilterSpace(View):
    def get(self,request,*args,**kwargs):
        property = request.GET.get('property',None)
        room = request.GET.get('room', None)
        price = request.GET.get('price', None)
        rental = Rental.objects.all()
        if room:
            rental = rental.filter(room=room)
            print('rental',rental)
        if price:
            rental = rental.filter(price__lte=price)
        if property:
            rental = rental.filter(property=property)
        rental_json =  serializers.serialize('json',rental)
        print('rental_json',rental_json)
        return HttpResponse(rental_json,content_type="application/json")

【问题讨论】：

How to display list of users using AJAX Django that get updated while adding new users from admin page的可能重复

说明：没有页面加载。你想解决什么问题？

您是否考虑过通过 API 将请求发送到后端？您将发送请求、接收响应并相应地更新页面。这样你就不需要重新加载页面了。

我没有尝试过，因为我想同时上传多张图片，如果我使用 REST API，这将非常困难。

我认为问题更多的是javascript而不是Django。你走在正确的道路上。您正在从 Django 请求数据，而 django 正在返回一个 JSON 对象。您的代码似乎正确（尚未测试）。然后，在您的 success 函数中，您需要对这些数据进行 DO 操作。看看datatables.net 这是一个很棒的工具，可以为你做很多繁重的工作。你的问题是：你想如何显示信息？

【参考方案1】：

为了提高 python 的效率，你应该找到一种方法，用所有参数过滤一次，而不是过滤过滤后的过滤，但这并不是查看结果所必需的。

在success: function(data) 中，你应该使用jQuery 将data 放入页面，你可以从类似的东西开始

function data2html(data) 
   ...// use .map and .join

$("#divid").append(data2html(data))

【参考方案2】：

您可能会考虑做的一件事是在服务器端将 html 呈现为字符串 (django - render_to_string not working)，并将其与数据一起以 ajax 响应发送回。然后将包含列表的 html 替换为服务器呈现的 html。

姜戈：

def get_list(request, *args, **kwargs):
    items = Items.objects.filter(...)
    html = ""
    items = [] # actual data
    context = 
        "item_list": items,
        ...
    

    for item in items:
        html = html + render_to_string(list_html_template, context, context_instance=RequestContext(request))
        items.append(item.to_json()) # You have to define this if you want it.

    return JsonResponse(
        "list_html": html,
        "items_data": itmes
    )

模板（list_html_template）：

% for item in item_list %
<!-- render item here... -->
% endfor %

Javascript：

$.ajax(
    url: "url_for_get_list_view",
    dataType: "json",
    ...
    success: function(json) 
        $(list_container).html(json.list_html); // Will replace any current html in this container (i.e. refresh the list).
        /* You can also do stuff with json.items_data if you want. */
    
);

【参考方案3】：

您可以通过执行以下操作来清除视图：

class MyView(View):
    def get(self, request):
        results = Rental.objects.filter(**request.GET)
        return serializers.serialize('json', results)

当您在 AJAX 请求中取回数据时，在 success 部分中，只需清除您的表并迭代结果并将行附加到现在为空的表中。

【参考方案4】：

在我看来，使用 AJAX 在 django 中进行逻辑和渲染来检索和放置渲染的 html 会更清晰。这是代码的草图

这是将租借集合传递给 html 模板的视图

def ajax_rental_search(request):
    search_text = 'missing'

    if request.method == "GET":
        search_text = request.GET.get("search_text", "missing")

    # DEBUG: THIS CAN CHECK THE CONNECTION
    # return HttpResponse('SERVER RESPONSE: search_text: ' + search_text)

    if search_text != 'missing':
        rentals = Rental.objects # add filters etc. 

    context = 
        "rentals": rentals
    

    return render(request, "rentals_search_response.html", context)

这里是关键部分，jquery、ajax请求：

    function rentalSearch() 
        const search_text = content_search_input');

        $.ajax(
            type: "GET",
            url: < rental_search_url >,
            data: 
                'search_text': search_text,
            ,
            success: function (serverResponse_data) 
                // console.log('search success: ' + serverResponse_data);
                $('#rentals_content').html(serverResponse_data);  
                // rentals_content is an existing div on page
            ,
            error: function (serverResponse_data) 
                console.log('error:' + serverResponse_data)
            
        );
    

然后，您可以根据需要设置显示的租赁样式，因为它们都将传递给子模板。 就是这样