Django前端页面利用ajax动态显示数据

def dataYear(request): ???""" ??????统计所有数据的界面， 生成年份标签 ???""" ???year = request.GET[‘year‘] ???table_type = request.GET[‘table‘] ???cursor = connections[‘stats‘].cursor() ???provinceSql = "SELECT DISTINCT province FROM YEAR_DATA_QUALITY_VIEW WHERE table_type=‘crawlerapp_results_history‘" ???cursor.execute(provinceSql) ???company_year_records = cursor.fetchall() ???provinces_list = [] ???for company_year_record in company_year_records: ???????provinces_list.append(company_year_record[0]) ???detail_info = {} ???# 创建月份的统计数据视图 ???for province in provinces_list: ???????detail_info[province] = {} ???????yearSql = "SELECT syear, province, records_count FROM YEAR_DATA_QUALITY_VIEW WHERE table_type=‘%s‘ AND province=‘%s‘ AND syear=‘%s‘ ORDER BY syear" % ( ???????????table_type, province, year) ???????cursor.execute(yearSql) ???????company_year_records = cursor.fetchall() ???????if len(company_year_records) > 0: ???????????detail_info[province][‘year‘] = company_year_records[0][0] ???????????detail_info[province][‘province‘] = company_year_records[0][1] ???????????detail_info[province][‘year_total‘] = company_year_records[0][2] ???????else: ???????????context = {‘detail_info‘: {}} ???????????return HttpResponse(json.dumps(context)) ???????monthSql = "SELECT syear, province, month, records_count FROM month_results_view WHERE table_type=‘%s‘ AND province=‘%s‘ AND syear=‘%s‘ ORDER BY month" % ( ???????????table_type, province, year) ???????cursor.execute(monthSql) ???????company_month_records = cursor.fetchall() ???????# detail_info[province][‘‘] = company_month_records[0][0] #年份 ???????# detail_info[province][‘‘] = company_month_records[0][1] #省份 ???????# detail_info[province][‘month_data‘] ={} ???????for init_month in range(1, 13): ???????????detail_info[province][‘month‘ + str(init_month)] = ‘暂无数据‘ ???????for month_data in company_month_records: ???????????# detail_info[province][month_data[2]] = month_data[2] #月份 ???????????detail_info[province][‘month‘ + str(month_data[2])] = month_data[3] ?# 数据量 ???????baseInfoSql = "SELECT syear, company_count, monitor_count, monitor_info_count FROM COMPANY_BASE_INFO_VIEW WHERE province=‘%s‘ AND syear=‘%s‘ ORDER BY syear" % ( ???????????province,year) ???????cursor.execute(baseInfoSql) ???????company_base_infos = cursor.fetchall() ???????# detail_info[province][‘base_info‘] ={} ???????detail_info[province][‘base_year‘] = company_base_infos[0][0] ???????detail_info[province][‘base_company_count‘] = company_base_infos[0][1] ???????detail_info[province][‘base_monitor_count‘] = company_base_infos[0][2] ???????detail_info[province][‘base_monitor_info_count‘] = company_base_infos[0][3] ???context = {‘detail_info‘: detail_info} ???# return render(request, ‘test.html‘, context) ???print ‘data year‘, ‘-‘*50 ???return HttpResponse(json.dumps(context))

def dataOverview(request): ???""" ???统计所有数据的界面， 生成年份标签 ???""" ???cursor = connections[‘stats‘].cursor() ???# 获取视图中的年份 ???yearSql = "SELECT DISTINCT syear FROM YEAR_DATA_QUALITY_VIEW WHERE table_type=‘crawlerapp_results_history‘" ???cursor.execute(yearSql) ???company_year_records = cursor.fetchall() ???year_list = [] ???for company_year_record in company_year_records: ???????year_list.append(company_year_record[0]) ???context = {‘year_list‘: year_list} ???return render(request, ‘overview.html‘, context)

{% extends ‘new_base.html‘ %}{% block grid %}<div class="ui equal width grid" style="margin:5px 0 5px 0;width:70%">{# ?------------------------------------------------ CHART BLOCK --------------------------------------------------- ?#} ???<div class="row"> ?????<div class="column"> ???????<div class="ui container segment"> ???????????<div class="ui compact menu"> ???????????????<select name="year" class="ui dropdown" id="year"> ???????????????????<option value="">年份</option> ???????????????????{% for year in year_list %} ???????????????????????<option class="item py_item" value={{year}}>{{year}}</option> ???????????????????{% endfor %} ???????????????</select> ???????????????<select name="table_type" class="ui dropdown" id="table"> ???????????????????<!--<option value="">Gender</option>--> ???????????????????<option value="crawlerapp_results_history">历史监测数据</option> ???????????????????<option value="crawlerapp_results">实时监测数据</option> ???????????????</select> ???????????</div> ???????????{# ???????????????表格1#} ???????????<div class="table-container"> ???????????????<table class="ui nine column table celled table-result" id="table-result"> ???????????????????<thead> ???????????????????????<tr> ???????????????????????????<th>省份</th> ???????????????????????????<th>监测数据总数</th> ???????????????????????????<th>1月</th> ???????????????????????????<th>2月</th> ???????????????????????????<th>3月</th> ???????????????????????????<th>4月</th> ???????????????????????????<th>5月</th> ???????????????????????????<th>6月</th> ???????????????????????????<th>7月</th> ???????????????????????????<th>8月</th> ???????????????????????????<th>9月</th> ???????????????????????????<th>10月</th> ???????????????????????????<th>11月</th> ???????????????????????????<th>12月</th> ???????????????????????</tr> ???????????????????</thead> ???????????????????<tbody id="tbody-result"> ???????????????????</tbody> ???????????????</table> ???????????</div> ????????????{# ???????????????表格1#} ???????????<div class="table-container"> ???????????????<table class="ui nine column table celled table-result" id="table-result2"> ???????????????????<thead> ???????????????????????<tr> ???????????????????????????<th>省份</th> ???????????????????????????<th>公司数量</th> ???????????????????????????<th>监测点数量</th> ???????????????????????????<th>监测因在数量</th> ???????????????????????</tr> ???????????????????</thead> ???????????????????<tbody id="tbody-result2"> ???????????????????</tbody> ???????????????</table> ???????????</div> ???????</div> ?????</div> ???</div>{# ?------------------------------------------------ CHART BLOCK --------------------------------------------------- ?#}</div>{% endblock %}{% block table %} ????<script>// ???????年份下拉框的改变事件 ???????$(‘#year‘) ?????????.dropdown({// ???????????action: ‘hide‘, ?????????????onChange: function (value, text, $selectedItem) {// ?????????????获取表类型参数 ?????????????????var tableType = $(‘#table‘).dropdown(‘get value‘)[0]; ?????????????????var tableTypeText = $(‘#table‘).dropdown(‘get text‘)[0]; ?????????????????console.log((tableType));// ???????????获取选中年份的字段 ?????????????????var year = value; ?????????????????console.log((year)) ?????????????????var tbody=window.document.getElementById("tbody-result"); ?????????????????var tbody2=window.document.getElementById("tbody-result2"); ?????????????????$.ajax({ ?????????????????????url:"year/?year="+year+"&table=" + tableType, ?????????????????????type:‘GET‘, ?????????????????????success:function (msg) {{# ?????????????????????????反序列化#} ?????????????????????????var data = eval(‘(‘ + msg + ‘)‘); ?????????????????????????console.log(typeof(msg)); ?????????????????????????var table_data = data[‘detail_info‘]; ?????????????????????????console.log(table_data) ?????????????????????????var str1 = ‘‘; ?????????????????????????var str2 = ‘‘; ?????????????????????????if (!table_data){ ?????????????????????????????tbody.innerHTML=‘‘; ?????????????????????????????tbody2.innerHTML=‘‘; ?????????????????????????????return ?????????????????????????} ?????????????????????????for ( k in table_data){ ?????????????????????????????console.log(k) ?????????????????????????????str1 += "<tr>" + ?????????????????????????????????"<td>"+ table_data[k][‘province‘] +"</td>" + ?????????????????????????????????"<td>"+ table_data[k][‘year_total‘] +"</td>" + ?????????????????????????????????"<td>"+ table_data[k][‘month1‘] +"</td>" + ?????????????????????????????????"<td>"+ table_data[k][‘month2‘] +"</td>" + ?????????????????????????????????"<td>"+ table_data[k][‘month3‘] +"</td>" + ?????????????????????????????????"<td>"+ table_data[k][‘month4‘] +"</td>" + ?????????????????????????????????"<td>"+ table_data[k][‘month5‘] +"</td>" + ?????????????????????????????????"<td>"+ table_data[k][‘month6‘] +"</td>" + ?????????????????????????????????"<td>"+ table_data[k][‘month7‘] +"</td>" + ?????????????????????????????????"<td>"+ table_data[k][‘month8‘] +"</td>" + ?????????????????????????????????"<td>"+ table_data[k][‘month9‘] +"</td>" + ?????????????????????????????????"<td>"+ table_data[k][‘month10‘] +"</td>" + ?????????????????????????????????"<td>"+ table_data[k][‘month11‘] +"</td>" + ?????????????????????????????????"<td>"+ table_data[k][‘month12‘] +"</td>" + ?????????????????????????????"</tr>" ?????????????????????????????str2 += "<tr>"+ ???????????????????????????????????????"<td>"+ table_data[k][‘province‘] +"</td>" + ???????????????????????????????????????"<td>"+ table_data[k][‘base_company_count‘] +"</td>" + ???????????????????????????????????????"<td>"+ table_data[k][‘base_monitor_count‘] +"</td>" + ???????????????????????????????????????"<td>"+ table_data[k][‘base_monitor_info_count‘] +"</td>" + ?????????????????????????????????????"</tr>" ?????????????????????????} ?????????????????????????tbody.innerHTML = str1; ?????????????????????????tbody2.innerHTML = str2; ?????????????????????} ?????????????????}) ?????????????} ?????????}); ???????// ???????实时表或是历史表的改变类型触发 ???????$(‘#table‘) ?????????.dropdown({// ???????????action: ‘hide‘, ?????????????onChange: function (value, text, $selectedItem) {// ???????????????console.log(value, text);// ?????????????????获取表类型参数 ?????????????????var year = $(‘#year‘).dropdown(‘get value‘)[0];// ???????????????如果没有年份被选中，则返回 ?????????????????if (year == "") return; ?????????????????console.log((year));// ???????????????获取选中年份的字段 ?????????????????var tableType = value; ?????????????????var tableTypeText = text; ?????????????????console.log(tableType){# ??????????????????if( !tableType || !year){#}{# ???????????????????????alert("缺少参数,必须要指年份!");#}{# ???????????????????????return;#}{# ???????????????????}#} ?????????????????var tbody=window.document.getElementById("tbody-result"); ?????????????????var tbody2=window.document.getElementById("tbody-result2"); ?????????????????$.ajax({ ?????????????????????url:"year/?year="+year+"&table=" + tableType, ?????????????????????type:‘GET‘, ?????????????????????success:function (msg) {{# ?????????????????????????反序列化#} ?????????????????????????var data = eval(‘(‘ + msg + ‘)‘); ?????????????????????????console.log(typeof(msg)); ?????????????????????????var table_data = data[‘detail_info‘]; ?????????????????????????console.log(table_data) ?????????????????????????var str1 = ‘‘; ?????????????????????????var str2 = ‘‘; ?????????????????????????if (!table_data){ ?????????????????????????????tbody.innerHTML=‘‘; ?????????????????????????????tbody2.innerHTML=‘‘; ?????????????????????????????return ?????????????????????????} ?????????????????????????for ( k in table_data){ ?????????????????????????????console.log(k) ?????????????????????????????str1 += "<tr>" + ?????????????????????????????????????????"<td>"+ table_data[k][‘province‘] +"</td>" + ?????????????????????????????????????????"<td>"+ table_data[k][‘year_total‘] +"</td>" + ?????????????????????????????????????????"<td>"+ table_data[k][‘month1‘] +"</td>" + ?????????????????????????????????????????"<td>"+ table_data[k][‘month2‘] +"</td>" + ?????????????????????????????????????????"<td>"+ table_data[k][‘month3‘] +"</td>" + ?????????????????????????????????????????"<td>"+ table_data[k][‘month4‘] +"</td>" + ?????????????????????????????????????????"<td>"+ table_data[k][‘month5‘] +"</td>" + ?????????????????????????????????????????"<td>"+ table_data[k][‘month6‘] +"</td>" + ?????????????????????????????????????????"<td>"+ table_data[k][‘month7‘] +"</td>" + ?????????????????????????????????????????"<td>"+ table_data[k][‘month8‘] +"</td>" + ?????????????????????????????????????????"<td>"+ table_data[k][‘month9‘] +"</td>" + ?????????????????????????????????????????"<td>"+ table_data[k][‘month10‘] +"</td>" + ?????????????????????????????????????????"<td>"+ table_data[k][‘month11‘] +"</td>" + ?????????????????????????????????????????"<td>"+ table_data[k][‘month12‘] +"</td>" + ???????????????????????????????????"</tr>" ?????????????????????????????str2 += "<tr>"+ ???????????????????????????????????????"<td>"+ table_data[k][‘province‘] +"</td>" + ???????????????????????????????????????"<td>"+ table_data[k][‘base_company_count‘] +"</td>" + ???????????????????????????????????????"<td>"+ table_data[k][‘base_monitor_count‘] +"</td>" + ???????????????????????????????????????"<td>"+ table_data[k][‘base_monitor_info_count‘] +"</td>" + ?????????????????????????????????????"</tr>" ?????????????????????????} ?????????????????????????tbody.innerHTML = str1; ?????????????????????????tbody2.innerHTML = str2; ?????????????????????} ?????????????????}) ?????????????} ?????????}); ????</script>{% endblock %}