Question

我正在尝试从HTML表单获取用户输入并使用该值在我的Django应用程序中填充ChartJS图形，该应用程序名为DisplayData，其中有一个名为Display.html的模板。我有一个API设置将数据传递到ChartJS，名为display / api / chart / data /，我用它来获取两个列表来填充Chart。为了制作图表，我从我的模型中获取数据并将数据值（整数）与记录值的时间戳相对应。这是获取数据的查询之一：

all_entries = models.Entries.objects.all().filter(parent=2)

现在，我把它硬编码到一次数据值（如上所示，到整数2），但我希望用户有一个表单，他们可以输入一个数字并提交它，生成图表通过使用该整数作为过滤器。用户输入整数将放在上面代码的parent =部分内。

我设置了以下网址。

urls.py

urlpatterns=[
    url(r'^$',views.DisplayView, name='DisplayView'),
    url(r'^api/data/$', views.get_data, name='api-data'),
    url(r'^display/api/chart/data/$', views.ChartData.as_view()),
    url(r'^logs/', views.LogDisplay, name='Display-Logs'),
]

为了达到这个目的，我在我的Display.html文件中添加了一个表格，上面是ChartJs的代码，如下所示。

Display.html

{% block content %}

<div class="row">
    <h4>Enter measurable number:</h4>
    <form method="POST">
        {% csrf_token %}
        <input type="number" name="textfield">
        <button type="submit">Submit</button>
    </form>
</div>


<div class='padded'>
    <div class='col-sm-12' url-endpoint='{% url "api-data" %}'>
        <h1>Graph Data</h1>
        <canvas id="myChart" width="400" height="400"></canvas>
    </div>  
</div>

<script>
{% block jquery %}
var endpoint = 'display/api/chart/data/'
var defaultData = []
var defaultLabels = [];
$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data){
        defaultLabels = data.labels
        defaultData = data.default
        console.log(data)
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: defaultLabels,
                datasets: [{
                    label: '# Measurable',
                    data: defaultData,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });
    },
    error: function(error_data){
        console.log("error")
        console.log(error_data)
    }
})

{% endblock %}

</script>

{% endblock %}

代码的第一部分是从用户获取数据的表单，第二部分是生成图表的代码，我们现在可以忽略这些图表，因为图表有效（当我对值进行硬编码时）。

在我的视图文件中，我有以下代码来获取用户的输入，然后将其放在查询所需的位置。

views.py

class ChartData(APIView):
    authentication_classes = []
    permission_classes = []


    def post(self, request, format=None):
        display_id = self.request.POST.get("textfield")

        print(request.data)

        try:
           display_id = int(display_id) 
        except ValueError: 
           display_id = 2

        return display_id

    def get(self, request, format=None):

        display_id = self.request.POST.get("textfield")


        print('value of display_id ')
        print(display_id)

        #insert value from form into parent= below
        all_entries = models.Entries.objects.all().filter(parent=display_id)
        all_measurables = models.Measurables.objects.all().filter(user_id=request.user.id) #change to current user


        all_times = [m.timestamp for m in all_entries]

        all_data = []
        for m in all_entries:
            data = m.data
            json_data = json.loads(data)
            value = json_data['value']
            all_data.append(value)


        data = {
            "labels": all_times,
            "default": all_data,
        }   
        return Response(data)

然而，当我运行这个程序时，在文本字段中输入一个数字并点击提交后，display_id的值似乎是None。我哪里出错了，我怎样才能实现我的目标？

将POST数据从表单传递到GET方法以生成图形

0 个答案: