直接代码展示:

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. Web 分页

    以Car表为例分页 页面以table展示数据分页 页面代码 <asp:Repeater ID="Repeater1" runat="server"> ...

  2. Redis修改数据多线程并发—Redis并发锁

    本文版权归博客园和作者本人吴双共同所有 .转载爬虫请注明地址,博客园蜗牛 http://www.cnblogs.com/tdws/p/5712835.html 蜗牛Redis系列文章目录http:// ...

  3. LinQ C#防注入式攻击实例代码

    注入式攻击是Web开放项目中开发人员的第一时间要考虑的问题,下面就我的开发实例分享给大家,有用的的话就点个赞吧. 定義賬戶信息類 public class UserInfors { public st ...

  4. Linux解决乱码问题

    主要的关注点是本身文件的编码和Linux的编码是否相同, 如果不相同的话,那么修改 例如: 就OK了,如果还是有问题的话,那么就查看一下连接工具的编码是否设置的有问题. 一般情况下,主要注意这些问题, ...

  5. virtualbox 虚拟机Ubuntu 传文件-共享

  6. PHP页面跳转（PHP笔记）

    目前学习到三种方法: 1.调用js跳转 2.header()跳转 3.调用HTML方法实现 因为一直在自己学习没有进入项目,并不知道哪个更常使用. 调用js跳转. <?php //这里是跳转方法 ...

  7. 云巴：基于MQTT协议的实时通信编程模型

    概要 有人常问,云巴实时通信系统到底提供了一种怎样的服务,与其他提供推送或 IM 服务的厂商有何本质区别.其实,从技术角度分析,云巴与其它同类厂商都是面向开发者的通信服务,宏观的编程模型都是大同小异, ...

  8. 安卓模拟器genymotion连接eclipse成功但是不显示其中项目

    安卓模拟器困了我两三天了,原装模拟器比较慢,忍受不了,查到安卓模拟器的神器——genymotion 按照网上的步骤一步步都安装完毕,最后打开后发现,genymotion界面里面没有找到新建的工程, 这 ...

  9. 23、ASP.NET MVC入门到精通——业务层和数据层父类及接口-T4模板

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 在上一篇中,我们已经把项目的基本框架搭起来了,这一篇我们就来实现业务层和数据层的父接口及父类. 1.我们先来定义一个业务层父接口IBaseB ...

  10. 解决eclipse配置Tomcat时找不到server选项(Mac通用)

    集成Eclipse和Tomcat时找不到server选项: 按照网上的步骤如下: 在Eclipse中,窗口(window)——首选项(preferences)——服务器(Server)——运行时环境( ...