通过模态对话框添加信息

0. 概要
   以前学的都是通过url的跳转，来实现在url页面中输入信息。
   但常用的都是通过模态对话框的样式来实现输入的。
   因此本文的目的是展示如何通过模态对话框实现信息输入。
1. 模态对话框
   1.1 样式输入
   在head标签里面增加style标签来实现样式的输入。
   使用.输入的都是class的名称

   <style>
{#    隐藏#}
        .hide{
            display: none;
        }
{#        遮罩层#}
        .shade{
            position: fixed;
            top: 0 ;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
{#        对话框#}
        .mode{
            position: fixed;
            top: 230px;
            height: 400px;
            width: 500px;
            left: 50%;
            background-color: white;
            margin-left: -250px;
            margin-top: -100px;
            z-index: 10;
        }
    </style>

1.2 模态对话框展示
在body中增加div标签

    <div  class = 'shade'></div>
    <div  class = 'mode '></div>

1.3 模态对话框隐藏

    <div class = 'shade hide'></div>
    <div class = 'mode hide'></div>

1.4 模态对话框实现信息输入

    <div id = 'shadeID' class = 'shade hide'></div>
    <div id = 'modeID' class = 'mode hide'>
        <input id = 'title' type = 'text' name = 'title'></input><br>
        <input type = 'button' value = '提交' οnclick="AjaxSend();"></input>
    </div>

1.5 如何实现点击button，出现模态对话框
通过button的onclick函数+script中实现函数的定义+函数中通过document获取元素实现操作。

    <div>
        <a onclick="addClass();">通过对话框添加班级</a>
    </div>
    <script>
        function addClass(){
            document.getElementById("shadeID").classList.remove('hide');
            document.getElementById("modeID").classList.remove('hide');
        }
   </script>

2. ajax实现信息上送
   2.1 包
   引入javaScript包

<script src = '/sta/jquery-3.1.1.min.js'></script>

2.2 规则
ajax的规则
$.ajax({})

        function AjaxSend(){
            $.ajax({
                url: '/add_class/',
                type: 'POST',
                data: {'title': $('#title').val()},
                success: function (data)
                {
                    if(data =='OK'){
                        alert("添加成功！");
                    }
                    else{
                        alert("添加失败！");
                    }
                    console.log(data);
                }
            })
        }

3. url的处理
   url对应的函数返回的值就直接是ajax中的data

def add_class(request):
    title = request.POST.get('title')
    print(title)
    sql.manageDB('insert into class(class_name) values(%s)',[title,])
    if len(title)>0:
        return HttpResponse('OK')
    else:
        return HttpResponse('不能为空')

4. 如何将提示信息显示在对话框旁边？
   之前是通过alert弹出对话信息，那个是网页形式的提示。现在想只将提示信息显示在方框旁边。
   方法：
   （1） 通过span标签，在想放置提示的方便添加span标签。

        <input id = 'title' type = 'text' name = 'title'></input><br>
        <span id="data"></span>
        <input type = 'button' value = '提交' οnclick="AjaxSend();"></input>

（2）然后在url返回信息中将想要提示的信息返回。

  return HttpResponse('不能为空')

（3）然后在ajax接收信息的地方，给span标签的内容赋值。

 $('#data').text(data)         

5. 如何实现添加成功后的页面跳转

 if(data =='OK'){
     location.href = "/"
 }

附加：
ajax、js的关系
jQuery与JavaScript与ajax三者的区别与联系
简单总结：
JS是一门前端语言。
Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。
jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便

关系比喻：
若把js比作木头，那么jquery就是木板（半成品）
jQuery与ajax都是js的一个框架，各有各的功能，若js是父亲的话，jquery与ajax就是两个儿子