Django 查看 Ajax 调用

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

这是第一次尝试看看它是否有效。一旦我知道这项工作，我将继续过滤与产品有关的查询。但如果这不起作用，那就没用了。

附言。是的，在 ajax 调用中我只传递了一个参数。这是为了知道它是否有效。稍后我将继续在数据字段中添加其他参数。

总结一下，能否请您告诉我为什么在 if request.is_ajax()' 中没有输入： 这是不是正确的方式，我该如何过滤原始查询？ 我也尝试过 if 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);
            });
    }