Django之Ajax增加数据

{% extends 'base.html' %}
{% block header %}
    <style>
    .a-style{
        display: inline-block;
        padding: 5px;
    }
    .active{
        background-color: #0b2e13;
        color: white;
    }
    .zzceng{
        background-color: #1c7430;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: 5;
        opacity: 0.7;
    }
    .dform{
        background-color: white;
        position: fixed;
        height: 300px;
        width: 400px;
        margin-top: 50%;
        margin-left: 50%;
        left: -200px;
        top: -250px;
        z-index: 6;
    }
    .hide{
        display: none;
    }
    </style>
{% endblock %}
{% block content %}
    <div class="mws-report-container clearfix">
        <div class="mws-panel grid_8">
                   <div class="mws-panel-header">
                       <span class="mws-i-24 i-table-1">教师表</span>
                    </div>
                    <div class="mws-panel-body">
                       <div class="mws-panel-toolbar top clearfix">
                           <ul>
                               <li><a href="javascript:void (0)" id="id_add" class="mws-ic-16 ic-accept">添加</a></li>
                               <li><a href="#" class="mws-ic-16 ic-cross">取消</a></li>
                               <li><a href="#" class="mws-ic-16 ic-printer">打印</a></li>
                               <li><a href="#" class="mws-ic-16 ic-arrow-refresh">保存</a></li>
                               <li><a href="#" class="mws-ic-16 ic-edit">更新</a></li>
                            </ul>
                        </div>
                        <table class="mws-table">
                            <thead>
                                <tr>
                                   <th><input type="checkbox" />选择</th>
                                    <th>班级</th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for class in cls %}
                                <tr class="gradeX">
                                   <td><input type="checkbox" /></td>
                                    <td>{{ class.caption }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>

                    </div>

                    <div class="page-a">{{ page }}</div>

                </div>
    </div>
    <div class="zzceng hide">
        <div class="dform hide">
            <form action="/classes_table.html/" method="post">
                {% csrf_token %}
               <p><input type="text" name="caption" placeholder="标题输入"></p>
                <input type="submit" value="form提交">
                <input type="button" value="Ajax提交" id="id_ajaxtj">
                <input type="button" value="取消" id="id_quxiao">
            </form>
        </div>
    </div>
{% endblock %}



{% block js %}
    <script src="/static/basetemp/js/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="/static/basetemp/js/jquery.cookie.js" type="text/javascript"></script>
    <script>
        $(function () {
            bindAddEvent();
            AjaxtjEvent();
        });
        function bindAddEvent() {
            $('#id_add').click(function () {
                $('.zzceng ,.dform').removeClass('hide')
            });
            $('#id_quxiao').click(function () {
               $('.zzceng ,.dform').addClass('hide')
            })
        }
        function AjaxtjEvent() {
            $('#id_ajaxtj').click(function () {
                var value=$('.dform input[name="caption"]').val();
                $.ajax({
                    url:'/classes_table.html/',
                    type:"POST",
                    data:{'caption':value},
                    dataType:'JSON',
                    headers:{'X-CSRFtoken':$.cookie('csrftoken')},
                    success:function (data) {
                        console.log(data);
                        if(!data.status){
                            alert(data.error);
                        }else{
                            location.reload();
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}