[django]django+post+ajax+highcharts使用方法
直接代码展示:
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>
<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使用方法的更多相关文章
- Django 如何让ajax的POST方法带上CSRF令牌
问题 大家知道,在大前端领域,有一种叫做ajax的东东,即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),它被用来在不刷新页面的情况下,提 ...
- Django框架 之 Ajax
Django框架 之 Ajax 浏览目录 AJAX准备知识 AJAX与XML的比较 AJAX简介 jQuery实现的ajax AJAX参数 AJAX请求如何设置csrf_token 序列化 一.AJA ...
- 根据Django后台的ajax大全
一.什么是ajax 1.1 什么是JSON? AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语 ...
- Django中的Ajax详解
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当 ...
- Django 资源 与 知识 Django中自建脚本并使用Django环境 model中的save()方法说明 filter()用法
Django 资源 与 知识 Django中自建脚本并使用Django环境 model中的save()方法说明 filter()用法 2018/11/06 Chenxin 资料说明 Django基础入 ...
- Django如何与ajax通信
示例一 文件结构 假设你已经创建好了一个Django项目和一个App,部分结构如下: mysite myapp |___views.py |___models.py |___forms.py |___ ...
- Django的日常-AJAX
目录 Django的日常-AJAX AJAX简介 AJAX与JQ的一个实例 AJAX与contentType AJAX传json格式 AJAX传文件 Django的日常-AJAX AJAX简介 首先A ...
- Python 之 Django框架（ Cookie和Session、Django中间件、AJAX、Django序列化）
12.4 Cookie和Session 12.41 cookie Cookie具体指的是一段小信息,它是服务器发送出来存储在浏览器上的一组组键值对,下次访问服务器时浏览器会自动携带这些键值对,以便服务 ...
- django中post方法和get方法的不同
当我们提交表单仅仅需要获取数据时就可以用GET: 而当我们提交表单时需要更改服务器数据的状态,或者说发送e-mail,或者其他不仅仅是获取并显示数据的时候就使用POST. 在这个搜索书籍的例子里,我们 ...
随机推荐
- HtmlHelper拓展实现CheckBoxList
经过一番折腾(主要是SelectList这个类操作有些繁琐)实现了CheckBoxList,过程RadioList基本一样 拓展方法 public static MvcHtmlString Check ...
- ASP.NET Core开发-如何配置Kestrel 网址Urls
ASP.NET Core中如何配置Kestrel Urls呢,大家可能都知道使用UseUrls() 方法来配置. 今天给介绍全面的ASP.NET Core 配置 Urls,使用多种方式配置Urls. ...
- 背水一战 Windows 10 (33) - 控件（选择类）: ListBox, RadioButton, CheckBox, ToggleSwitch
[源码下载] 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch 作者:webabcd 介绍背水一 ...
- svn提交时出现很多乱文件怎么解决
在我们开发项目中的时候经常使用到svn,有时候我们commit的时候回出现很多无用的文件,这些文件就是未版本化的文件,怎么解决这些乱文件的问题呢? svn commit提交的时候有个"sho ...
- UDS(ISO14229-2006) 汉译(No.7 应用层协议)【未完，待续】
7.1定义 应用层协议通常作为确认消息的传输,意味着从客户端发送的每一个请求都将有由服务器端产生的与之相对的响应. 唯一的例外在于:例如使用了功能寻址方式,或者该请求/指示没有指定生成响应/确定的少数 ...
- swift 之 纯代码创建 cell
初学swift 但是网上只有很多swift用xib创建的cell,就算是有也不是我想要的.今天自己弄了一个不用xib纯代码写的,来上代码 博客地址: https://github.com/liguol ...
- CSS：CSS样式表及选择器优先级总结
我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...
- 移动端UC /QQ 浏览器的部分私有Meta 属性
<meta name="format-detection" content ="telephone=no"/> 格式检测 禁止识别我们页面中的数 ...
- 【模块化编程】理解requireJS-实现一个简单的模块加载器
在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ..... ...
- iOS PresentViewControlle后,直接返回根视图
在开发中:用[self presentViewController:VC animated:YES completion:nil];实现跳转,多次跳转后,直接返回第一个. 例如: A presentV ...