javascript - AJAX 未按预期更新数据库查询

Question

我的页面同时使用了 django 上下文变量和 json 数据。第一页是仅显示所有可用数据的“母版页”。然而，其他页面是在提交下拉表单时加载的，用户可以在其中选择要查看的特定帐户。当用户选择一个帐户并提交下拉表单时，会发生两件事:

表单操作转到一个 django View 函数，该函数对数据库进行多次查询，然后在呈现模板时传递上下文变量。接下来，图表数据应该通过 Ajax 从某个 url 加载，该 url 返回带有数据的 JSONResponse。图表数据似乎可以很好地加载“母版”页面，因为当我访问发送数据的 url 时会显示所有数据。但是，在选择特定帐户后，我想将请求传递给 url，以根据选择过滤数据库，从而生成特定的图表数据。这是似乎不起作用的部分，因为当我选择一个特定的帐户时，我似乎无法只显示该特定帐户的图表数据。这是我的代码:

网址.py

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

View .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)

模板.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() }

但是您的 View 要求一个名为 selection 的 post 参数:

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

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

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