Come posso visualizzare i risultati della ricerca in base al valore filtrato fornito dall'utente?

Question

Ho sviluppato un sistema di filtri in cui fornisce 3 opzioni come tipo di proprietà, numero di stanze e prezzo massimo. Ogni volta che selezionano le opzioni di filtro, l'utente otterrà immediatamente i risultati della ricerca. Ad esempio, se un utente ha selezionato il tipo di proprietà di Appartamento e il numero di camere come 4 e il prezzo massimo di 12000, l'utente otterrà quegli affitti il ​​cui tipo di proprietà è l'appartamento con 4 stanze di 12000 marchi. Ho sviluppato la parte front-end con React.js e ho potuto recuperare i dati selezionati dall'utente con successo. Ho anche passato i dati ad ajax ma non ho idea di come dovrei visualizzare i risultati della ricerca in base al valore filtrato fornito dall'utente senza caricare la pagina.

Ajax codice

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

per l'efficienza in pitone si dovrebbe trovare il modo di filtrare una volta con tutti i parametri, invece di filtro del filtrato il filtro, ma questo non è essenziale per vedere il risultato.

all'interno success: function(data){ si dovrebbe utilizzare jQuery per mettere data nella pagina, si potrebbe iniziare con qualcosa di simile

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

Answer 2

Una cosa che si potrebbe prendere in considerazione facendo è rendere il codice HTML in una stringa (django - render_to_string not working) sul lato server e rimandalo indietro con una risposta ajax insieme ai dati. quindi sostituire l'html in cui l'elenco è contenuto con quello reso dal server.

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

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

È possibile chiarire la vostra vista facendo qualcosa di simile a questo:

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

e quando si ottengono i dati nella richiesta AJAX, nella parte success basta cancellare la tabella e scorrere i risultati e aggiungere le righe alla tabella ora vuota con i dati.