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

以下代码是某个项目中的一部分，无法直接使用。

1、需要有一个试图返回数据据（数据API）

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

2、需要一个视图对数据进行渲染

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)

3、使用ajax

{% extends 'new_base.html' %}

{% block grid %}
<div class="ui equal width grid" style="margin:5px 0 5px 0;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 %}

 4、显示效果

选择条件：

动态获取数据，在不重新刷新页面的情况下加载数据表单