![[django]django+post+ajax+highcharts使用方法](https://1200zi.500zi.com/uploadfile/img/15/511/d9bc5f480505beeb0bab9cc669d03d79.jpg)
直接代码展示:
view.py文件代码
from django.http import JsonResponse #django ajax部分def ajax_kchart(request): times = request.POST['shijian']chnl = request.POST['chnl']chnl_data = keywork_chart(chnl,times)data_list = []for j in chnl_data:data_list.append(j)return JsonResponse(data_list,safe=False)
这里重点关注两点ajax_kchart函数名 和 JsonResponse(data_list,safe=False)返回json的函数
ajax_kchart函数名需要出现在url配置中,Django 1.7 及以后的版本才可以用到JsonResponse,若返回参数是列表,要令safe=False
url.py代码:
url(r'^workchart/$', 'keywork.views.ajax_kchart', name='ajax_kchart'),
模板代码:
{% load staticfiles %}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><script src="{% static 'js/jquery/jquery.min.js' %}"></script><script src="{% static 'js/Highcharts/js/highcharts.js' %}"></script><script>$(document).ready(function(){ $("#btn3").click(function(){ $.post("{% url 'ajax_kchart' %}", {csrfmiddlewaretoken:"{{ csrf_token }}",shijian:$("#shijian3").val(),chnl:$("#mkt_chnl").val(),},function (data,status) {var day_id = [];var ydxz = [];var ydjz = []; var kdxz = [];var kdjz = [];var dsxz = [];var dsjz = [];var lbdg = [];var sjqz = [];var sjxz = [];var ftth = [];for (var i = 0; i <= data.length - 1; i++) { var cdma_jz = data[i].cdma_xz + data[i].cdma_zdcj;var adsl_jz = data[i].adsl_xz + data[i].adsl_zdcj;var iptv_jz = data[i].iptv_xz + data[i].iptv_zdcj;var pstn_jz = data[i].pstn_xz + data[i].pstn_zdcj;$("#zhiju").html(data[i].mkt_chnl_name);day_id.push(data[i].day_id);ydxz.push(data[i].cdma_xz);ydjz.push(cdma_jz);kdxz.push(data[i].adsl_xz);kdjz.push(adsl_jz);dsxz.push(data[i].iptv_xz);dsjz.push(iptv_jz);lbdg.push(data[i].dlb_dg);sjqz.push(data[i].cdma_qz);sjxz.push(data[i].sjsg_xz);ftth.push(data[i].ftth_xz);};$('#cdma_chart').highcharts({ //移动业务发展图表chart: {type: 'line'},title: {text: '移动业务发展量'},xAxis: {categories: day_id},yAxis: {title: {text: '个'}},series: [{name: '移动新增',data: ydxz}, {name: '移动净增',data: ydjz},{name: '4G新增',data: sjxz}],plotOptions: {line: {dataLabels: {//数据标签 enabled: true}}, series: {//延迟加载animation: false}},});} }</script>/head><body><form class="form-inline">{% csrf_token %}<label class="control-label"><i class="icon-time"></i> 时间</label><select name="shijian3" id="shijian3" class="input-small" placeholder=".input-small">{%for d in downlist%} <option value="{{d.day_id}}">{{d.day_id}}</option>{%endfor%} </select> <label class="control-label"><i class="icon-eye-open"></i> 支局</label><select name="mkt_chnl" id="mkt_chnl" class="input-small" placeholder=".input-small">{% for d in data %} <option value="{{d.mkt_chnl_id}}">{{d.mkt_chnl_name}}</option>{%endfor%} </select><input type="button" id="btn3" value="查询" class="btn btn-primary btn-sm"/> </form><div class="chart" id="cdma_chart"></div></body></html>
完毕！
