Question

我有使用django上下文变量和json数据的页面。第一页是＆＃34;主页＆＃34;只显示所有可用数据。然而，在提交下拉表单时加载其他页面，其中用户可以选择要查看的特定帐户。当用户选择一个帐户并提交下拉表单时，会发生两件事：

表单操作转到django视图函数，该函数对数据库进行多次查询，然后在呈现模板时传递上下文变量。接下来，Chart数据应该通过Ajax从某个url加载，该url返回带有数据的JSONResponse。图表数据似乎适用于＆＃34; master＆＃34;页面，因为当我访问发送数据的URL时显示所有数据。然而，在选择特定帐户时，我想将请求传递给URL以根据选择过滤数据库，从而产生特定的图表数据。这部分似乎不起作用，因为当我选择一个特定的帐户时，我似乎无法获得仅显示该特定帐户的图表数据。这是我的代码：

urls.py

from django.conf.urls import url, include
from . import views
from .views import get_master_data, get_specific_data

views.py

### SELECTED METER DATABASE DATA PULL ###
def get_specific_data(request, *args, **kwargs): ### This isn't working as intended ###

if request.method == 'POST':

    selected_meter = request.POST.get('selected_meter')

    usage_data = list(MeterData.objects.filter(name=selected_meter).order_by('date').values_list('usage', flat=True))
    #### A bunch of other similar queries ####

    data = {
        "usage_data": usage_data,
        #### corresponding parts for other queries not shown ####
    }
    return JsonResponse(data)

else:

    usage_data = list(MeterData.objects.order_by('date').values_list('usage', flat=True))
    ##### A bunch of other similar queries #####

    data = {
        "usage_data": usage_data,
        #### corresponding parts for other queries not shown ####
    }
    return JsonResponse(data)

template.html

// This script is what gets the chart data. This works on the master page //
<script>
    var categories = [];
    var data = [];
    var endpoint = '/properties/api/chart/data/'
    $.ajax({
        method: "GET",
        url: endpoint,
        success: function(data){
            categories = data.dates
            usageData = data.usage_data
            OldCostsData = data.oldCosts_data
            NewCostsData = data.newCosts_data
            OldRatesData = data.oldRates_data
            NewRatesData = data.newRates_data
            savingsData = data.savings_data
            Chart.defaults.global.defaultFontFamily = "Gotham-Black";
            var usageCanvas = document.getElementById("usageChart");
            var ratesCanvas = document.getElementById("ratesChart");
            var costsCanvas = document.getElementById("costsChart");
            var savingsCanvas = document.getElementById("savingsChart");
        }
    });
</script>

// This is supposed to post the dropdown menu selection on submission before loading the new template thus querying specific chart data //
<script>
    var meterForm = $('#property-select');
    var specificDataUrl = '/properties/api/specific-chart/data/';
    meterForm.submit(function(event){
        event.preventDefault();
        $.ajax({
            type: "POST",
            url: specificDataUrl,
            data: { selected_meter: $('#property-select option:selected').val() }, // data to be sent with the post request

            success: function(data) {
                console.log(data)
            },
        });
    });;
</script>


<!-- This is the form -->
    <form method="POST" action="/properties/property-selected/" id="property-select">
            {% csrf_token %}
            <select name="meters" class="dropdown-content">
                {% for meter in user_meters %}
                <option value="{{ meter }}">{{ meter.name }}</option>
                {% endfor %}
            </select>
            <input type="submit" value="Submit" class="submit-button" style="margin-top:30px;"/>
    </form>

我不确定为什么图表数据的特定数据查询不起作用。非常感谢任何帮助，谢谢！

Answer 1

在您的Javascript中，您使用名为selected_meter的参数发布请求：

data: { selected_meter: $('#meter-option').val() }

但您的观点是要求提供名为selection的帖子参数：

selected_meter = request.POST.get('selection')

更新您的视图或Javascript以使参数名称相同，例如

selected_meter = request.POST.get('selected_meter')

AJAX没有按预期更新数据库查询

1 个答案: