Django Blick auf Ajax Anruf

Question

Ich erstelle eine Katalogseite. Auf dieser Seite möchte ich dem Benutzer erlauben, die Produkte zu filtern. Also habe ich eine Sidebar mit Checkboxen und Eingabetexten erstellt. Ich möchte, dass jedes Mal, wenn der Benutzer die Filterparameter ändert, der Katalog aktualisiert wird.

dies ist mein Code:

html für sidebar (Filter):

<h3>Filtri:</h3> 
     <b>Marca:</b><br> 
     {% for marca in marche %} 
      <input type="checkbox" title="{{ marca.nome }}" value="{{ marca.nome }}" name="marca" class="marca" onclick="filtra()"> {{ marca.nome }} <br> 
     {% empty %} 
      <p>Nessuna Marca è ancora stata inserita.</p> 
     {% endfor %} 
     <br> 
     <b>Portata:</b> <br> 
     Maggiore di 
     <input type="text" title="portata" name="portata" id="portata" class="textbox-filtro" maxlength="4" onblur="filtra()"> kg 
     <br><br> 
     <b>Sollevamento:</b> <br> 
     Maggiore di 
     <input type="text" title="sollevamento" id="sollevamento" class="textbox-filtro" maxlength="4" onblur="filtra()"> mt 
     <br><br> 
     <b>Trazione:</b><br> 
     {% for tra in trazione %} 
      <input type="checkbox" title="{{ tra.trazione }}" value="{{ tra.trazione }}" id="{{ tra.trazione }}" class="trazione" onclick="filtra()"> {{ tra.trazione }} <br> 
     {% empty %} 
      <p>Nessuna Trazione è ancora stata inserita</p> 
     {% endfor %} 
     <br> 
     <b>Idroguida:</b><br> 
     {% for idro in idroguida %} 
      <input type="checkbox" title="{{ idro.idroguida }}" value="{{ idro.idroguida }}" id="{{ idro.idroguida }}" class="idroguida" onclick="filtra()"> {{ idro.idroguida }} <br> 
     {% empty %} 
      <p>Nessuna Idroguida è ancora stata inderita</p> 
     {% endfor %} 

Wie Sie sehen können, habe ich 5 Filtergruppen: Marca (Marke), Portata (Tragfähigkeit), Sollevamento (Aufzug), Trazione (Traktion) und Idroguida (Servolenkung).

Jedes Mal, wenn Sie diese Werte bearbeiten, wird die JavaScript-Funktion filtra() aufgerufen ... so onblur für Texteingabe und onclick für Checkboxen.

Hier wird der JavaScript-Code:

<script> 
     function getCookie(name) { 
      var cookieValue = null; 
      if (document.cookie && document.cookie !== '') { 
       var cookies = document.cookie.split(';'); 
       for (var i = 0; i < cookies.length; i++) { 
        var cookie = jQuery.trim(cookies[i]); 
        // Does this cookie string begin with the name we want? 
        if (cookie.substring(0, name.length + 1) === (name + '=')) { 
         cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
         break; 
        } 
       } 
      } 
      return cookieValue; 
     } 
     var csrftoken = getCookie('csrftoken'); 

     function csrfSafeMethod(method) { 
      // these HTTP methods do not require CSRF protection 
      return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 
     } 



     function filtra() { 
      var marche_selezionate = []; 
      var marca_check = document.getElementsByClassName('marca'); 
      for(var i = 0; i < marca_check.length; i++){ 
       if(marca_check[i].checked){ 
        marche_selezionate.push(marca_check[i].value); 
       } 
      } 
      marche_selezionate = marche_selezionate.join(','); 

      var portata_selezionata = document.getElementById('portata').value; 
      var sollevamento_selezionata = document.getElementById('sollevamento').value; 

      var trazioni_selezionate = []; 
      var trazione_check = document.getElementsByClassName('trazione'); 
      for(i = 0; i < trazione_check.length; i++){ 
       if(trazione_check[i].checked){ 
        trazioni_selezionate.push(trazione_check[i].value); 
       } 
      } 

      var idroguida_selezionate = []; 
      var idroguida_check = document.getElementsByClassName('idroguida'); 
      for(i = 0; i < idroguida_check.length; i++){ 
       if(idroguida_check[i].checked){ 
        idroguida_selezionate.push(idroguida_check[i].value); 
       } 
      } 


      $.ajaxSetup({ 
       beforeSend: function(xhr, settings) { 
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 
         xhr.setRequestHeader("X-CSRFToken", csrftoken); 
        } 
       } 
      }); 

      var postUrl = "{% url 'carrellielevatori:carrellielevatori' %}"; 
      $.ajax({ 
       url: postUrl, 
       type: 'POST', 
       data: {'marche_selezionate': marche_selezionate}, 
       success: function(result){ 
        alert('success'); 
        }, 
       error: function (xhr, ajaxOptions, thrownError) { 
        alert(xhr.status); 
        alert(thrownError); 
        } 
      }); 
     } 

    </script> 

so, nach csrf Token einrichten, in Art und Weise der Fehler „403 verboten“ zu vermeiden, ich beginnen, und alle Parameter und die 5 Variablen eingerichtet, dass ich Ich möchte bei der Ansicht vorbeigehen, um den Katalog zu filtern.

Ich habe auch einige Warnungen in der Ajax-Aufruf in der Weise hinzugefügt, um zu wissen, ob es erfolgreich ist oder nicht. Es ist. Die Warnung mit "Erfolg" erscheint.

Das Problem ist, dass hier alles aufhört. In der Tat scheint es nichts passiert in der Ansicht.

hier der Code der Ansicht:

def carrellielevatori(request): 
    lista_carrelli = Carrelli.objects.all() 
    lista_marche = Marche.objects.all() 
    lista_trazione = Trazione.objects.all() 
    lista_idroguida = Idroguida.objects.all() 

    footerForm = MailForm() 

    method = 'get' 
    if request.is_ajax(): 
    method = 'ajax' 
    return render(request, 
       'carrellielevatori/carrellielevatori.html', 
       { 
        'title': 'Carrelli Elevatori - Giemme Lift s.r.l.', 
        'footerForm': footerForm, 
        'year': datetime.now().year, 
        'carrelli': lista_carrelli, 
        'marche': lista_marche, 
        'trazione': lista_trazione, 
        'idroguida': lista_idroguida, 
        'method':method, 
       }) 

zu verstehen, wenn es funktioniert, ich habe die Variable Methode „get“ einrichten und auf der Seite angezeigt. Dann im Ajax "Wenn" ändere ich den Wert in "Ajax". Also sollte es sich ändern, oder? Der Text bleibt "erhalten" und ändert sich nie zu "Ajax".

Dies ist ein erster Versuch zu sehen, ob es funktioniert. Sobald ich diese Arbeit kenne, werde ich fortfahren, die Frage zu filtern, die mit den Produkten übereinstimmt. Aber wenn das nicht funktioniert, ist es nutzlos.

PS. Ja im Ajax Anruf gebe ich nur einen Parameter weiter. Dies ist zu wissen, ob es funktioniert. Später werde ich fortfahren, die anderen Parameter im Datenfeld hinzuzufügen.

Zum Schluss, können Sie mir bitte sagen, warum nicht in die in if request.is_ajax() 'eingeben: Ist das nicht der richtige Weg, wie kann ich die oringal Abfrage filtern? Ich habe auch versucht, mit request.method == 'POST', aber ich bekomme das gleiche Ergebnis.

Answer 1

Hier ist, wie ich es tun würde:

@csrf_exempt 
def carrellielevatori(request): 
    lista_carrelli = Carrelli.objects.all() 
    lista_marche = Marche.objects.all() 
    lista_trazione = Trazione.objects.all() 
    lista_idroguida = Idroguida.objects.all()  
    footerForm = MailForm()  
    method = 'get' 
    if request.is_ajax(): 
     method = 'ajax' 
     return JsonResponse({ 
      'title': 'Carrelli Elevatori - Giemme Lift s.r.l.', 
      'footerForm': footerForm, 
      'year': datetime.now().year, 
      'carrelli': lista_carrelli, 
      'marche': lista_marche, 
      'trazione': lista_trazione, 
      'idroguida': lista_idroguida, 
      'method':method, 
     }) 

Im JS:

function filtra() { 
     var marche_selezionate = []; 
     var marca_check = document.getElementsByClassName('marca'); 
     for(var i = 0; i < marca_check.length; i++){ 
      if(marca_check[i].checked){ 
       marche_selezionate.push(marca_check[i].value); 
      } 
     } 
     marche_selezionate = marche_selezionate.join(','); 

     var portata_selezionata = document.getElementById('portata').value; 
     var sollevamento_selezionata = document.getElementById('sollevamento').value; 

     var trazioni_selezionate = []; 
     var trazione_check = document.getElementsByClassName('trazione'); 
     for(i = 0; i < trazione_check.length; i++){ 
      if(trazione_check[i].checked){ 
       trazioni_selezionate.push(trazione_check[i].value); 
      } 
     } 

     var idroguida_selezionate = []; 
     var idroguida_check = document.getElementsByClassName('idroguida'); 
     for(i = 0; i < idroguida_check.length; i++){ 
      if(idroguida_check[i].checked){ 
       idroguida_selezionate.push(idroguida_check[i].value); 
      } 
     } 

     var postUrl = "{% url 'carrellielevatori:carrellielevatori' %}"; 
     $.post(postUrl, {'marche_selezionate': marche_selezionate}, 
      function(result){ 
       alert('success'); 
      }).fail(function (data, status, xhr) { 
       alert(xhr.status); 
       alert(thrownError); 
      }); 
    }