Ajax实现添加学生的响应实现的方法

Ajax实现添加学生的方法，在Django中结合Ajax实现。
<a id="addModal">对话框的方式添加</a>
然后在<script>中添加响应函数。在同一个html中，写在script，于是下面的函数在页面加载时自动执行。
$(function(){
    $(#addModal).click(function(){
        alert(123)
        $('#shadow,#addModal').removeClass('hide');//注意一次性找到多个id的方法，移除隐藏class的写法
    }
}
)

同样，函数如果返回false，同样能够阻止href中的默认跳转事件发生。
<a href="http://www.baidu.com/" id="addModal">添加</a>
如果在上面的响应函数最后添加return false，那么不会跳转到百度。

这样的方式依赖jQuery，需要先导入:<script src="/static/jquery-1.12.4.js"></script>

Ajax实现响应的方法：
首先在HTML中添加div层。
<style>
//默认隐藏
    .hide{
        display:none;
    }
//定义遮罩层
    .shadow{
        position:fixed;//相对于窗口来说，固定位置。
        left:0;
        right:0;
        bottom:0;
        top:0;
        background-color:black;//设置颜色实现遮挡效果
        opacity:0.4;//设置透明度，实现灰度的效果，不至于一片黑色什么都看不见
        z-index:999;//设置图层的上下层关系
    }
//定义对话框层
    .add-modal{
        z-index:1000;比刚才设置的遮罩层的999大就行
        position:fixed;
        left:50%;
        top:50%;//这样right & bottom就不用写了，已经设定明确好位置
        //不设置opacity，没有透明度
        width:400px;
        height:300px;
        background-color:white;//这样就可以直接显示出来
        margin-left:-200px;//往左边稍微移动
        margin-top:-200px;//向上稍微移动
    }
</style>
<div class="shadow hide" id="shadow"> //这是遮罩层
</div>

<div class="add-modal hide" id="addModal">
<p>
    <input id="addName" type="text" name="name" placeholder="姓名"/>//placeholder属性会在输入框中灰色显示缺省值，但IE低版本不支持
</p>
<p>
<select name="classID" id="addClassId">//为方便js取值，设置id值
{% for row in class-list %}
    <option value="{{ row.id }}">{{ row.title }}</option>
    {% endfor %}
</select>
</p>
</div>//这是对话框层
增加添加按钮，注意Ajax响应不再form中，type不能是submit类型。
<input id="btnAdd" type="button" value="添加学生" />
//增加一个span，用于显示成功或失败信息
<span id="addError" style="color:red;"></span>
然后在script中添加响应函数
$(function(){
    $('#btnAdd').click(function(){
        $.ajax({
            url:'/modal_add_student/',
            type:'POST',
            data:{'name':$('#addName').val(),'class_id':$('#addClassId').val(),
            sucess:function(arg){
                console.log(arg);
                arg = JSON.parse(arg);//convert the arg to object
                if(arg.status){
                    location.reload();
                }else{
                    $(#addError).text(arg.message);
                }
            }
        })
    })
})

在url.py中添加网址的对应函数关系：
path(r'^modal_add_student/',views.modal_add_student),

在view.py中添加处理函数：
def modal_add_student(request):
    //首先定义返回值
    ret = {'status':True,'message':None}
    try:
        name = request.POST.get('name')//注意ajax中的数据也是使用post的方式获取的
        class_id = request.POST.get('class_id')
        sqlheper.modify('insert into student(name,class_id) values(%s,%s)',[name,class_id,]
    except Exception as e:
        ret['status']=False
        ret['message']=str(e)
    return HttpResponse(json.dumps(ret))