Django / Ajax - 如何根据选择过滤和显示结果

时间:2017-08-05 03:58:45

标签: jquery python ajax django

我正在尝试根据用户从下拉框中做出的选择在Django中过滤和显示数据。我正在使用ajax调用向Django视图发送请求。当用户选择例如航空公司A时,Ajax将向Django后端发送该选择的“值”,这是一个整数,以过滤数据并将其发送回前端。这是我的代码:

HTML:

<form method="GET">
    <select id="airline-selected">
        {% for airline in airline_list %}
            <option value="{{ airline.id }}">
            {{ airline.name }}
            </option>
        {% endfor %}
    </select>
    <input type="button" value="Update" id="selection-button" method="GET">
</form>

的Ajax:

<script>
        $( "#selection-button" ).click(function(event) {
            event.preventDefault();
            var airlineSelected = $('#airline-selected').find(":selected").val();

            $.ajax({
                url: "{% url 'charts_data' %}",
                method: 'GET',
                filter_category: parseInt(airlineSelected),
                success: function(data){
                console.log(data)
         },
                error: function(error_data){
                console.log("error")
                console.log(error_data)
         }
            })
        });
    </script>

Views.py:

class ChartData(generics.ListAPIView):
    serializer_class = FinancialDataSerializer

    def get_queryset(self, *args, **kwargs):
        filter_category = self.request.GET.get("filter_category")
        queryset = FinancialData.objects.filter(airline_id=filter_category)
        queryset_filtered = queryset.filter()
        return queryset_filtered

我的console.log(data)显示一个空数组,表示视图未被过滤。如何根据用户的选择过滤和显示数据?

1 个答案:

答案 0 :(得分:3)

尝试修改您的ajax代码以添加data变量。

$.ajax({
     url: "{% url 'charts_data' %}",
     method: 'GET',
     data : {
             filter_category: parseInt(airlineSelected)
     }
     success: function(data){
         console.log(data)
     },
     error: function(xhr, errmsg, err){
         console.log("error")
         console.log(error_data)
     }
});