我想使用ajax从数据库中获取数据，然后在views.py中定义数据以显示在条形图中

Question

我想从数据库中获取数据。我使用Ajax，然后我想在views.py中定义它，以提取数据并使用Django在视图(网页(中显示它。我该如何处理才能将"；be_total"；来自数据库的数据，然后显示"0"的值；be_total"；在我的网页上以条形图的形式显示？有人能帮我吗？

我的代码是：

index.html:

<form class="form-row" method="post" >
{% csrf_token %}

<div class="form-group col-md-2" >
<select class="form-control select2" > 
<option>Select M Head</option>
{% for major in majors %}
<option value="{{ major.pk }}" id="m1">{{ major.pk }}: {{ major.description }}</option> 
{% endfor %} 
</select>
</div>

<div class="form-group col-md-2"> 
<select class="form-control select2" >
<option>Select M Head</option>
{% for major in majors %}
<option value="{{ major.pk }}" id="m2">{{ major.pk }}: {{ major.description }}</option> 
{% endfor %} 
</select>
</div>

<div class="form-group col-md-2">
<select class="form-control select2" >
<option>Select M Head</option>
{% for major in majors %}
<option value="{{ major.pk }}" id="m3">{{ major.pk }}: {{ major.description }}</option> 
{% endfor %} 
</select>
</div>

<div class="form-group col-md-2">
<select class="form-control select2" >
<option>Select M Head</option>
{% for major in majors %}
<option value="{{ major.pk }}" id="m4">{{ major.pk }}: {{ major.description }}</option> 
{% endfor %} 
</select>
</div>

<div class="form-group col-md-2">
<select class="form-control select2" >
<option>Select M Head</option>
{% for major in majors %}
<option value="{{ major.pk }}" id="m5">{{ major.pk }}: {{ major.description }}</option> 
{% endfor %} 
</select>
</div>

<div class="form-group col-md-2">
<button type="button" onclick="submitData()">Submit</button>  
</div>
</form>
````
````
<script type="text/javascript">
function submit(){
// Get answer from the input element
var dt = document.getElementById("m1").value;
var dtt = document.getElementById("m2").value;
var dttt = document.getElementById("m3").value;
var dtttt = document.getElementById("m4").value;
var dttttt = document.getElementById("m5").value;
// add the url over here where you want to submit form .
var url = 'home';

$.ajax({
url: url,
data: {
'm1': dt,
'm2': dtt,
'm3': dttt,
'm4': dtttt,
'm5': dttttt,
},
dataType: 'JSON',
success: function(data){
// show an alert message when form is submitted and it gets a response from the view where result is provided and if url is provided then redirect the user to that url.
alert(data.result);
if (data.url){
window.open(data.url, '_self');
}
}
});
}
</script>

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

**views.py:**
def home(request):
majors = Major.objects.filter(percentages__isnull=False).distinct().order_by("pk")
if request.method == 'POST':
form = request.POST.get('be_nextyr_total')
line_chart = pygal.Line(width=1500)
line_chart.title = 'Budget Estimation'  
context = { 
"chart": line_chart.render_data_uri(),
'majors': majors
}
return render(request, "website/index.html" , context )

Answer 1

您必须在ajax代码中指定类型，如

type:'POST'