直接代码展示:

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" "http://www.w3.org/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>

            &nbsp;&nbsp;

            <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>

完毕！

[django]django+post+ajax+highcharts使用方法的更多相关文章

  1. Django 如何让ajax的POST方法带上CSRF令牌

    问题 大家知道,在大前端领域,有一种叫做ajax的东东,即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),它被用来在不刷新页面的情况下,提 ...

  2. Django框架 之 Ajax

    Django框架 之 Ajax 浏览目录 AJAX准备知识 AJAX与XML的比较 AJAX简介 jQuery实现的ajax AJAX参数 AJAX请求如何设置csrf_token 序列化 一.AJA ...

  3. 根据Django后台的ajax大全

    一.什么是ajax 1.1 什么是JSON? AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语 ...

  4. Django中的Ajax详解

    AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当 ...

  5. Django 资源 与 知识 Django中自建脚本并使用Django环境 model中的save()方法说明 filter()用法

    Django 资源 与 知识 Django中自建脚本并使用Django环境 model中的save()方法说明 filter()用法 2018/11/06 Chenxin 资料说明 Django基础入 ...

  6. Django如何与ajax通信

    示例一 文件结构 假设你已经创建好了一个Django项目和一个App,部分结构如下: mysite myapp |___views.py |___models.py |___forms.py |___ ...

  7. Django的日常-AJAX

    目录 Django的日常-AJAX AJAX简介 AJAX与JQ的一个实例 AJAX与contentType AJAX传json格式 AJAX传文件 Django的日常-AJAX AJAX简介 首先A ...

  8. Python 之 Django框架（ Cookie和Session、Django中间件、AJAX、Django序列化）

    12.4 Cookie和Session 12.41 cookie Cookie具体指的是一段小信息,它是服务器发送出来存储在浏览器上的一组组键值对,下次访问服务器时浏览器会自动携带这些键值对,以便服务 ...

  9. django中post方法和get方法的不同

    当我们提交表单仅仅需要获取数据时就可以用GET: 而当我们提交表单时需要更改服务器数据的状态,或者说发送e-mail,或者其他不仅仅是获取并显示数据的时候就使用POST. 在这个搜索书籍的例子里,我们 ...

随机推荐

  1. 【Win10开发】处理PC上的后退键

    我们知道在win10手机上和平板上都会有后退键,那么PC上该怎么办呢?没关系我们慢慢揭晓. 如果你已经是UWP的忠实用户,那么肯定会见到如下的后退键. 那么我们如何来做出来呢?, 我们首先打开App. ...

  2. [moka同学笔记]七、Yii2.0课程笔记（魏曦老师教程）[新增管理员，重置密码]

  3. 关于Lind.DDD.Api客户端的使用与知识分享

    回到目录 关于Lind.DDD.Api的使用与客户端的调用 作者:张占岭 花名:仓储大叔 框架:Lind.DDD,Lind.DDD.Api 目录 Api里注册全局校验特性 1 Api中设置全局的Cor ...

  4. maven引入的jar带了时间戳

    正常情况下,我们引入的第三方jar一般都是类似spider-1.0.5-SNAPSHOT.jar的名称,但是有些环境下,我们引入的三方jar会带上了时间戳,如下所示: spider-1.0.5-201 ...

  5. LZW压缩算法——简明原理与实现

    LZW和哈夫曼编码一样,是无损压缩中的一种.该算法通过建立字典,实现字符重用与编码,适用于source中重复率很高的文本压缩.本文首先讲下LZW的编解码原理,然后给出LZW的实现code. ***** ...

  6. 打印发现function toUpperCase() { [native code] }

    var s='hello' undefined s.toUpperCase function toUpperCase() { [native code] } s.toUpperCase() " ...

  7. jQuery拖拽改变元素大小

    一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...

  8. Mvc视图的那些事

    最近参与项目底层重写,在代码组织方式,类型使用上已经与之前有了很大的不同,这里总结一下视图的使用. 一.视图中命名空间的使用 视图命名空间的使用方式大致有三种:一,完全限定名,如 @System.Da ...

  9. browserify学习总结

    前言 在未接触browserify,虽然我知道它是一个前端构建工具,但还是有几个疑问: 1. browserify出现的日期? 2. 能构建哪些文件? 3. 附加的browserify代码体积是多大? ...

  10. Linux学习心得之 Linux下命令行Android开发环境的搭建

    作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Linux学习心得之 Linux下命令行Android开发环境的搭建 1. 前言2. Jav ...