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

时光如瑾雨微凉 2020-07-19

知识总结回顾:

      -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元组

    

相关推荐

inspuryhq / 0评论 2020-07-28