Wie kann ich das Suchergebnis basierend auf dem vom Benutzer bereitgestellten gefilterten Wert anzeigen?

Question

Ich habe Filtersystem entwickelt, in dem es drei Optionen wie Objekttyp bietet, die Anzahl der Zimmer und die maximalen Preis. Jedes Mal, wenn sie Filteroptionen auswählen, erhält der Benutzer sofort sein Suchergebnis. Zum Beispiel, wenn ein Benutzer Wohnungstyp und Anzahl der Zimmer als 4 und Höchstpreis von 12000 ausgewählt hat, dann wird der Benutzer diejenigen Mieten, deren Eigenschaftstyp Wohnung mit 4 Zimmern von 12000 Mark ist. Ich habe den Front-End-Teil mit React.js entwickelt und konnte Benutzerdaten erfolgreich abrufen. Ich habe auch Daten an Ajax übergeben, aber ich habe keine Ahnung, wie ich die Suchergebnisse basierend auf gefilterten Wert von Benutzer ohne Seitenladung angezeigt werden soll.

Ajax Code

$.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

für Effizienz in der Python Sie den Weg mit allen Parametern des Filters das gefilterte statt filtern einmal finden sollten das gefiltert, aber das ist nicht wichtig, um das Ergebnis zu sehen.

innerhalb success: function(data){ Sie jQuery verwenden sollten data in die Seite zu stellen, könnte man mit so etwas wie

function data2html(data) { 
    ...// use .map and .join 
} 
$("#divid").append(data2html(data)) 

Answer 2

Eine Sache, starten Sie sich anschauen sollten tun, ist die HTML in einen String-Rendering (django - render_to_string not working) auf der Serverseite und senden Sie das zusammen mit den Daten in einer Ajax-Antwort zurück. Ersetzen Sie dann das HTML, in dem die Liste enthalten ist, durch das, das vom Server gerendert wird.

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 
    }) 

Vorlage (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

Sie können Ihre Ansicht, indem Sie so etwas wie dies aufklären:

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

und wenn Sie die Daten zurück in Ihre AJAX-Anforderung erhalten, in dem success Teil nur Ihre Tabelle löschen und über die Ergebnisse iterieren und Zeilen in die nun leere Tabelle mit Ihren Daten anhängen.