Django学习日记-03单表-模态对话框的Ajax和新URL

结合笔记02实列对a过程socket服务器链接进行简化

　　　　-可以建立一个新目录sqlhelp创建函数

　　　　-把增删改分为一组

def get_commit(sql,list):
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', password='123456', database='day6')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute(sql, list)
    conn.commit()
    cursor.close()
    conn.close()
    return 0

　　　　-把查分为一组

def get_all(sql,list):
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', password='123456', database='day6')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute(sql,list)
    result = cursor.fetchall()
    cursor.close()
    conn.close()
    return result

def get_one(sql,list):
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', password='123456', database='day6')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute(sql, list)
    result = cursor.fetchone()
    cursor.close()
    conn.close()
    return result

对于模板ti语言可以进行IF条件判断，如果客户输入为空，提醒客户字符串不能为空白

　　　　-views中对用户提交的数据进行判断（Form组件）

　　　　-这个过程应用很有必要

建立模态对话框

　　-通过新URL方式（页面会刷新）

　　　　 1，在urls.py中添加需要跳转的url地址，

　　　　　2，创建与URL相互对应的函数（增删改查。。。） 然后选择合适的返回方式render/redirect　

　　　　　　3，利用前端知识，需要创建HTML的模板，关键词的超链接，for循环语句

　　　　　　　　　　注意FORM表单提交是POST，删查改的action的url需要带‘ ？’+参数

      -通过AJAX方式（页面不会刷新）

　　　　　1，在urls.py中添加需要跳转的url地址，

　　　　　　　2，在HTML中引入JQuery文件

　　　　　　　　

 <script src='/static/jquery-1.12.4.js'></script>

　　　　　　　　3，在html的头部中创建css样式（隐藏hide，遮罩层shadow，对话框modal）

 <style>
        {# 隐藏 #}
         .hide{
             display: none;
         }
         {#遮罩层#}
        .shadow{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.4;
            z-index: 99;
        }
        {#对话框#}
        .modal{
            z-index: 100;{# 优先级 越大越优秀 #}
            position: fixed;
            left: 50%;
            top: 50%;
            height: 300px;
            width: 400px;
            background-color: white;
            margin-left:-200px ;
            margin-top: -150px;

        }
    </style>

　　　　　　　　4，在身体body中创建showmodal函数用于控制对话框的开和关

<script>
        function showmodal() {
            {#移除hide#}
            document.getElementById('shadow').classList.remove('hide');
            document.getElementById('modal').classList.remove('hide');
        }
     function endmodal()   {
            {#增加hide#}
            document.getElementById('shadow').classList.add('hide');
            document.getElementById('modal').classList.add('hide');
        }
</script>

　　　　　　　　5先把modal对话框关闭

    <div id="shadow" class="shadow hide"></div>
    <div id="modal" class="modal hide">

　　　　　　　　6在html对应的部分添加上keyword 超链接 搭配上mdal对话框的函数

 <a onclick="showmodal()"> 对话框添加</a> {# 包含事件 #}

　　　　　　　　7搭配上需要客户输入的部分，input

<p>
        添加班级名称:<input type="text" name="title" id="title">
    </p>
        <input onclick="AjaxSend();" type="button" value="提交">
        <input onclick="endmodal();" type="button" value="取消">

　　　　　　　　8创建与URL相互对应的函数（增删改查。。。） 然后选择合适的返回方式HttpResponse 因为ajax只能返回一堆字符串

  　　　　　　　9，在bodys里面写上AJAX函数（其实逻辑上和form表单是一样的），发到那里去，用什么方式发，发什么内容三个部分 ，注意这一个部分是偷偷进行的 所以它不会刷新页面，注意标点符号的添加

 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)
                    }
                                        }
                    })
 function AjaxDelete() {
            $.ajax({
            {% for item in class_list %}
                url:'/modal_del_class/?id={{item.id}}',
                type:'GET',
                data:{ },
            {% endfor %}
                success:function (data) {
                    console.log(data);
                    if (data == 'ok') {
                        location.href = '/class/'
                    }else{
                        $('#eorrmsg').text(data)
                    }
                }
            })

        }
        function AjaxEdit() {
            $.ajax({
            {% for item in class_list %}
                url:'/modal_edit_class/?id={{item.id}}',
                type:'POST',
                data:{'title':$('#title').val()},
            {% endfor %}
                success:function (data) {
                    console.log(data);
                    if(data == 'ok'){
                        location.href = '/class/'
                    }else {
                        $('#eorrmsg').text(data)
                    }
                }
            })

        }

　　　　　　　　　　　　type选择发送的方式，data是客户输入的数据，success是当前服务端处理完毕后，自动执行的回调函数

　　　　　　　　　　　　

$.ajax({
url: '要提交的地址',
type: 'POST', // GET或POST,提交方式
data: {'k1': 'v1','k2':'v2'}, // 提交的数据
success:function(data){
// 当前服务端处理完毕后，自动执行的回调函数
// data返回的数据
}

})、

总结：这一部分需要用到部分前端的知识，自己还没学CSS和js所以学得有点吃力，不过都是些简单记忆的内容

模态对话框（Ajax）
- 少量输入框
- 数据少
登录
新URL方式
- 操作多
- 对于大量的数据以及操作