Django View on Ajax call

Question

Я создаю страницу каталога. На этой странице я хочу разрешить пользователю фильтровать продукты. Итак, я создал боковую панель с флажками и входными текстами. Я бы хотел, чтобы каждый раз, когда пользователь менял параметры фильтра, каталог обновляется.

это мой код:

HTML для боковой панели (фильтр):

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

Как вы можете видеть, у меня 5 фильтров группы: Marca (торговая марка), Portata (пропускная способность), Sollevamento (лифт), Trazione (тяга) и Idroguida (усилитель руля).

Каждый раз, когда вы редактируете эти значения, функция javascript filtra() вызывается ... поэтому onblur для ввода текста и onclick для флажков.

Здесь Javascript код:

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

так, после установки CSRF токен, в пути, чтобы избежать ошибки «403 запрещено», я начинаю смотреть и все параметры и настроить 5 переменных, которые я хотели бы перейти на представление, чтобы отфильтровать каталог.

Я также добавил предупреждение в вызове ajax, чтобы узнать, успешно ли это или нет. Это. Появляется предупреждение с «успехом».

Проблема в том, что все здесь останавливается. На самом деле, кажется, ничего не происходит в представлении.

здесь код зрения:

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

понять, если это работает, я создал переменный метод «получить» и отображения его на странице. Затем в ajax «if» меняет значение на «ajax». Так что это должно измениться, не так ли? текст остается «get» и никогда не изменяется на «ajax».

Это первая попытка увидеть, работает ли она. Как только я узнаю эту работу, я перейду к фильтрации запроса с помощью продуктов. Но если это не работает, это бесполезно.

PS. Да в вызове ajax передаю только один параметр. Это нужно знать, работает ли оно. Позже я приступлю к добавлению других параметров в поле данных.

В заключение, не могли бы вы рассказать мне, почему не входить, если request.is_ajax() ': Неправильно ли это, как я могу отфильтровать запрос в oringal? Я также пробовал, если request.method == 'POST', но я получаю тот же результат.

Answer 1

Вот как я бы это сделать:

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

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