直接代码展示:

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. C#获取图片的后缀名

    最近在学习过程中遇到一个问题,就是如何获取图片的格式,对于一张知道全路径的照片,如果其路径包含后缀名的话,要取得后缀名,只需要一行代码即可: var ext = System.IO.Path.GetE ...

  2. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

  3. 轻量级ORM

    不知道可能称的上是ORM,其实就是一个DBHelper.看到网上不少人写自己的ORM,但我觉得都不太好. 我这个ORM,学习成本非常低,常用的方法仅有几个,在使用的过程中,你不需要有太多要注意的地方, ...

  4. C++控制台贪吃蛇代码

    游戏截图: 以下是3个代码文件: Snake_Class.h文件: #ifndef SNAKE #define SNAKE #include<windows.h> #include< ...

  5. 网页中的<th></th>是什么意思

    th定义表格内的表头单元格. html 表单中有两种类型的单元格: 1:表头单元格 - 包含表头信息(由 th 元素创建) 2:标准单元格 - 包含数据(由 td 元素创建) 注:th 元素内部的文本 ...

  6. ubuntu中LAMP环境搭建及ubuntu语言和输入法设置

    1.  LAMP 的安装 1) sudo apt-get install apache2 mysql-server mysql-client php5 php5-gd php5-mysql 2) 存放 ...

  7. Linux安装JDK1.7

    发表此篇文章纯属本人愚钝,希望以后再安装JDK不要走那么多曲折的路,也希望可以给后人借鉴. 1.以下以JDK1.7为例 具体官网地址:http://www.oracle.com/technetwork ...

  8. 转载：《TypeScript 中文入门教程》 3、接口

    版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 TypeScript的核心原则之一是对值所具有的shape进行类型检查. 它有时 ...

  9. 一个过滤特殊字符的JS

    <script language="javascript"> function checkForms() { var iu, iuu, regArray=new Arr ...

  10. 工业串口和网络软件通讯平台（SuperIO 2.1）更新发布

    SuperIO 2.1下载 一.SuperIO 的特点: 1)    能够很快的构建自己的通讯平台软件,包括主程序. 2)   设备模块化开发,通过配制文件挂载,即可在平台软件下运行. 3)   设备 ...