Django NBA Web开发 - Step 15 异步加载局

前一章节做完了球队常规赛数据的展示，这个章节想做通过选择器来选择常规赛是属于哪个赛季，最终展示对应赛季信息的功能，并且这个功能需要做成异步加载.

1: 赛季选择框

首先做一个控件，用于选择你想看到哪个赛季的信息，还是在前端模板中，只做功能，优化后期再说。

<div>
        <select id="select_year" name="years">
            <option value="2018" selected>2018</option>
            <option value="2017">2017</option>
        </select>
</div>

2: 编写script

<script type="text/javascript">
    $(document).ready(function(){
        $('#select_year').change(function() {
            var year = document.getElementById('select_year');   //在页面上选中select框
            var year_value = year.options[year.selectedIndex].text;   //获取用户选择的是哪个赛季的值
            $.ajax({
                url:"{% url 'stats:team_regular' %}",    //还是发送到team_regular这个路由
                type:'post',                                          //但是请求方式改为post
                dataType:'json',                                  //数据格式也改为json
                data:{
                    year:year_value,                            //发送的数据包含所选赛季的值
                    csrfmiddlewaretoken:'{{ csrf_token }}',
                },
                success:function(data) {
                    table_body = document.getElementById('table_regular_body');  //选中表格
                    $('#table_regular_body').empty();   //清空表格的内容
                    for (var i = 0; i < data.rows; i++)      //进行循环，循环总数为后端发送回来的实例的总数，这里正常都是30，因为只有30个球队
                    {
                        var row = document.createElement('tr'); //为每个球队创建一行
                            row.className = 'table_regular_every_row';
                        var row_value = JSON.parse(data.teams_set);  //后续传过来的json是以字符串存在的，需要解析成JS对象
                        for (var key in row_value[i]['fields'])    //遍历每个实例的每个字段
                        {
                            var each_td = document.createElement('td');    //为每个字段的数据创建td
                                each_td.className = 'team_regular_table_td';  //为每个td添加class属性
                            each_td.innerHTML = row_value[i]['fields'][key];   //将每个字段的值添加进td内
                            row.appendChild(each_td);   //然后将每个td加到行的后面
                        }
                        table_body.appendChild(row); //最后将每一行加到表格
                    }
                }
                })
            })
    })
</script>

3: 修改views视图函数

说实话，这个views函数改了3天，期间查了无数关于queryset的文章.
其实明明很简单的问题，被自己查复杂了.

按照请求类型来划分，get的时候，正常渲染2018赛季的信息
如果是post，则按照客户选择的年份来进行展示数据

def team_regular(request):

    if request.method == 'GET':
        # 取出对象的值得集合，对象是一个valuequeryset
        teams = Team_Season_Regular.objects.filter(Season=2018).values()
        # 遍历每个实例对象
        for i in teams:
            # 将几个命中率的数据转换成百分比
            i['FGP'] = '{:.2f}%'.format(i['FGP'] * 100)
            i['ThreePP'] = '{:.2f}%'.format(i['ThreePP'] * 100)
            i['TwoPP'] = '{:.2f}%'.format(i['TwoPP'] * 100)
            i['FTP'] = '{:.2f}%'.format(i['FTP'] * 100)

        # 取得模型的字段名提供给前端，并忽略第一个
        field_names = Team_Season_Regular._meta.fields[1:]
        return render(request, 'team_regular.html', locals())
    elif request.method == 'POST':
        year = request.POST['year']
        teams = Team_Season_Regular.objects.filter(Season=year)

        for each_row in teams:
            each_row.FGP = '{:.2f}%'.format(each_row.FGP * 100)
            each_row.ThreePP = '{:.2f}%'.format(each_row.ThreePP * 100)
            each_row.TwoPP = '{:.2f}%'.format(each_row.TwoPP * 100)
            each_row.FTP = '{:.2f}%'.format(each_row.FTP * 100)
        teams_set = serializers.serialize('json', teams)
        return JsonResponse({'status': 'success', 'notice': 'this year is' + year, 'rows': len(teams), 'teams_set': teams_set})

4: 效果展示

效果展示

再看一下后台的请求

后台请求