Question

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

Ajax代码

$.ajax({
  type: 'GET',
  url: '/filter/space/',
  data{property: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")

Answer 1

为了提高python的效率，您应该找到使用所有参数过滤一次的方法，而不是过滤过滤后的过滤，但这对于查看结果并不重要。

在vm.NoticePeriodUnit = vm.NoticePeriodUnitValue[0].value;内你应该使用jQuery将success: function(data){放入页面，你可以从

开始

data

Answer 2

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

Django的：

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. */
    }
});

Answer 3

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

father

当您在AJAX请求中获得数据时，在let conversationIds = conversations.map(conversation => { return conversation.conversation_id; }); models.conversationDetails.findAll({ attributes: [ [models.sequelize.fn("max", models.sequelize.col('id')), 'id'] ], where: { conversation_id: conversationIds }, group: ['conversation_id'] }) .then(function(results) { let ids = results.map(result => { return result.id; }); models.conversationDetails.findAll({ include: [ { model: models.conversationMeta, as: 'conversationMeta' } ], where: { id: { [Op.in]: ids } } }) .then(function(conversationList) { callback(false, conversationList); }) .catch(function(error) { console.log(error); callback(true, 'Internal Server Error'); }); }) .catch(function(error) { console.log(error); callback(true, 'Internal Server Error'); });部分中只需清除表并迭代结果并将行附加到包含数据的现在空表中。

Answer 4

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

这是将租金集合传递到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)
            }
        });
    }

然后，您可以对显示的租金进行样式设置，知道它们都将传递给子模板。就是这样

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

4 个答案: