Django学习日记-08回顾--温故知新

Posted 2020-12-17 kangkang1999

知识总结回顾：

　　　　　　-Ajax全部操作在一个html页面执行，对于之前的Ajax操作中事件的发生于其对于的联系方式相关，思路上首先都在思考编写模板内容部分，然后在是函数的执行　

　　　-　使用 id = ‘事件名’  与其对应的是  <script>   $.(‘# 事件名‘).click(function() {

　　　　　　　　　　　　　　　　　　　　　　　　　　　　xxxxx 

　　　　　　　　　　　　　　　　　　　　　　　　　　})　　</script>

<input id="modal_add_student" type="button" value="提交">



$(‘#modal_add_student‘).click(function () {
            $.ajax({
                url: ‘/modal_add_student/‘,
                type: ‘POST‘,
                data: {‘name‘: $(‘#xname‘).val(), ‘class_id‘: $(‘#classID‘).val()},
                success: function (arg) {
                    console.log(arg);
                    arg = JSON.parse(arg);
                    if (arg.status) {
                        location.reload();
                    } else {
                        $(‘#error‘).text(arg.message);
                    }
                }
            })
        });

 

　　　-　使用 onclick = ‘事件名();’ 与其对应的是<script > function 事件名() {

　　　　　　　　　　　　　　　　　　　　　　　　　　　　xxxxx

　　　　　　　　　　　　　　　　　　　　　　　　　　}　　　</script>

<input onclick="AjaxSend();" type="button" value="提交">


function AjaxSend() {

               {#内容和form一样 怎么发 发到哪 发什么东西#}
            $.ajax({
                url: ‘/modal_add_class/‘,
                type: ‘POST‘,
                data: {‘title‘: $(‘#title‘).val()},
                success: function (data) {
                    //当服务端处理完成后，自动调用
                    //data表示服务端返回的值
                    console.log(data);
                    if (data == ‘ok‘){
                        location.href=‘/class/‘
                    } else {
                        $(‘#eorrmsg‘).text(data)
                    }
                                        }
                    })
                            }

　　　　　　　　对应css<style>部分是关于遮罩层shadow，模板modal，隐藏层hide部分内容

　　　　　　　-增加部分：在modal模板提交按钮添加事件用id或者onclick都行 , ajax三步走url，type：‘post’，data需要要到$(‘#xxx‘.val())添加客户输入的内容 

 　　　　　　　　　　　　　-可以有两种方法的增加

　　　　　　　　 　　　　一种是客户填写在html的内容根据属性直接抓取在AJax里面使用

　　　　　　　　　　

$(‘#modal_add_student‘).click(function () {
            $.ajax({
                url: ‘/modal_add_student/‘,
                type: ‘POST‘,
                data: {‘name‘: $(‘#xname‘).val(), ‘class_id‘: $(‘#classID‘).val()},
                success: function (arg) {
                    console.log(arg);
                    arg = JSON.parse(arg);
                    if (arg.status) {
                        location.reload();
                    } else {
                        $(‘#error‘).text(arg.message);
                    }
                }
            })
        });

　　　　　　　　　　　　第二种是需要用到内部数据库资源，在打开modal模板时利用js调取option选项，再利用事件用ajax执行 

　　　　　　　　　　　　　　下面是多项式的操作  在Ajax用get获取数据库数据 用each循环抓取option选项

 $(‘#showmodal‘).click(function (){
            $(‘#shadow,#modal‘).removeClass(‘hide‘);

            $.ajax({
                url:‘/get_all_class/‘,
                type:‘GET‘,
                dataType:‘JSON‘,
                success:function(arg){
                    console.log(arg);
                    $.each(arg,function(i,row){
                        var tag = document.createElement(‘option‘);  //建立option选项
                        tag.innerHTML = row.title;  //建立内部标签
                        tag.setAttribute(‘value‘, row.id);  //建立属性
                        $(‘#classID‘).append(tag);   //添加到select选择中
                    });

                }
            })
        }) ;

 var v =$(this).parent().prevAll();
    var editID = $(v[2]).text();
    var editname = $(v[1]).text();
    var edit_classID = $(v[0]).attr(‘clsid‘);

    console.log(editID,editname,edit_classID);
    $(‘#enitID‘).val(editID);
    $(‘#editname‘).val(editname);
    $(‘#editclassID‘).val(edit_classID);

}) ;

 $(‘#modal_add_teacher‘).click(function() {
            var name = $(‘#name‘).val();
            var class_id_list = $(‘#classID‘).val();
            $.ajax({
                url:‘/modal_add_teacher/‘,
                type:‘POST‘,
                data:{‘name‘:name,‘class_id_list‘:class_id_list},
                dataType: ‘JSON‘,
                traditional:true,
                success:function(arg){
                    {#console.log(name,class_id_list);#}
                    if(arg.status){
                        location.reload();
                    }else {
                        alert(arg.message);
                    }
                }
            })

        })

　　　　　　　　　　-编辑部分 

　　　　　　　　　　   作者暂时做不出来 TAT

 

　　　　　　　- 新URL大同小异  思路在于先编写好新的HTML页面  在根据页面在views中写入函数

　　　　　　　　　　　　　　-增加部分：如果有多项选择式需要用到form表单的for循环  <option value=‘{{item.xxx}}’>  中value属性专门写入选择项序号     placeholder的form属性中用来提醒用户输入内容的

<form method="POST" action="/add_teacher/">
        老师名称：<input type="text" name="name" placeholder="老师姓名 ">

        <p>任教班级：
            <select   name="class_id" multiple>
                {% for i in result %}
                <option value="{{ i.id }}">{{ i.title }}</option>
                {% endfor %}
            </select>
        </p>
        <input type="submit" value="提交">
    </form>

与其对应的函数也应该是一个元组的形式输入即（学生id：学生课程）=（2，3），（2，4），（2，6）需要用一个空列表排列出来　　　

def add_teacher(request):
    if request.method == ‘GET‘:
        result= sqlhelp.get_all(‘select id,title from class ‘, [ ] )
        return render(request,‘add_teacher.html‘,{‘result‘:result})
    else:
        name =request.POST.get(‘name‘)
        class_id  = request.POST.getlist(‘class_id‘)
        # print(name,class_id)
        obj =sqlhelp.SqlHelper()
        teacher_id = obj.last_row_id(‘insert into teacher(name) values (%s)‘,[name, ])

        # 多次链接 多次提交
        # for cls_id in class_id:
        #     sqlhelp.get_commit(‘insert into teacher2class(teacher_id,class_id) values (%s,%s)‘,[teacher_id,cls_id,])

         # 一次链接   多次提交
        # for cls_id in class_id:
        #     obj.get_commit(‘insert into teacher2class(teacher_id,class_id) values (%s,%s)‘,[teacher_id,cls_id,])
        # obj.close()

        # 一次链接  一次提交
        data_list = [ ]
        for cls_id in class_id:
            temp = (teacher_id,cls_id,)
            data_list.append(temp)
        obj.multiple_get_commit(‘insert  into teacher2class(teacher_id,class_id) values (%s,%s)‘,data_list)
        obj.close()
        return redirect(‘/teacher/‘)

　　　　　　　　　　　　　-编辑部分： 在html页面以{{xxxx}}的方式显示填入之前客户需要修改的内容

　　　　　　　　　　　　　　　　　　在函数中则get传入参数 post获取参数 然后在执行相应操作　　

　　　　　　　　　　　　　　　　　　　值得注意的是编多项式操作get需要多个list传入 post需要先将旧数据全部删除 再插入参数　　get_multiple_commit元组