Django-ajax - Python技术站

知识点复习：
 Python序列化
        字符串 = json.dumps(对象)    对象->字符串
        对象 = json.loads(字符串)    字符串->对象
        
    JavaScript:
        字符串 = JSON.stringify(对象) 对象->字符串
        对象 = JSON.parse(字符串)     字符串->对象
        
    应用场景：
        数据传输时，
            发送：字符串
            接收：字符串 -> 对象


知识点扩充：

事件委托

　　$('要绑定标签的上级标签').on('click','要绑定的标签',function(){})

　如果用的javequery 1或2 版本需要---》　$('要绑定标签的上级标签').delegate('要绑定的标签','click',function(){})

1.基础功能：发送数据到服务器但不强制用户重新加载他们所在的整个页面

语法：
　　　　$.ajax({                                  #$.ajax({})

url: 'abc', 　　#url:"url地址",
type: 'GET',　　　　　　　　　　　　　　　　　　#type:"发送方式：GET\POST",
data: {'k1':'v1'}, #data:只是字符串或数字,　　　

dataType: 'JSON', #json字符串反序列化

success:function(arg){ #回掉函数 # abc return 的值
# arg是字符串类型
}
})

获取form表单的所有值

var data = $('#fmForm表单的ID').serialize();
$.ajax({
data: $('#fm').serialize()
})

　发送数据时：　

　　 data中的valve三种情况

        a. 只是字符串或数字
            $.ajax({
                url: 'http//www.baidu.com',
                type: 'GET',
                data: {'k1':'v1'},
                dataType: 'JSON',      
                success:function(arg){
                    // arg是对象
                }
            })
         b. 包含属组
            $.ajax({
                url: 'http//www.baidu.com',
                type: 'GET',
                data: {'k1':[1,2,3,4]},
                dataType: 'JSON',              
                traditional: true,          #包含属组发送必须加traditional

         success:function(arg){ // arg是对象  } })
 c. 包含字典
    $.ajax({ 
        url: 'http//www.baidu.com', type: 'GET',
        data: {'k1': JSON.stringify({}) },       #json序列化
        dataType: 'JSON', 
        success:function(arg){ // arg是对象  } })

ajax方式发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>学生管理</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/>


    <style>
        .icon {
            margin:0 5px;
        }
    </style>




</head>
<body>

<div class="container">
    <div style="padding: 20px 0;">
        <a class="btn btn-primary" id="addBtn">添加</a>
        <a class="btn btn-danger">删除</a>
    </div>

    <div>
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>班级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tb">
                {% for row in stu_list %}
                    <tr nid="{{ row.id }}">
                        <td na="nid">{{ row.id }}</td>
                        <td na="stdname">{{ row.stdname}}</td>
                        <td na="stdage">{{ row.stdage }}</td>
                        <td na="stdgender">{{ row.stdgender }}</td>
                        <td na="eidt_cls" cid="{{ row.cls.id}}">{{ row.cls.classname}}</td>

                        <td>
                            <a class="glyphicon glyphicon-remove icon del-row"></a>
                            <a class="fa fa-pencil-square-o icon edit-row"></a>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>


        <ul class="pagination pagination-sm">
            {{ page_obj.page_str|safe }}
        </ul>
        <div style="height: 300px;"></div>
    </div>
</div>


<!-- Modal -->
{#添加学生#}
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>


        <h4 class="modal-title" id="myModalLabel">添加学生</h4>


      </div>
{#        #from表单#}
      <div class="modal-body">

          <form class="form-horizontal">
              <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="username" name="username" placeholder="姓名">
                    </div>
              </div>
              <div class="form-group">
                    <label for="age" class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" name="age" placeholder="年龄">
                    </div>
              </div>

                <div class="form-group">
                    <label  class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                      <label class="radio-inline">
                                <input type="radio" name="gender" value="1"> 男
                      </label>

                      <label class="radio-inline">
                                <input type="radio" name="gender" value="0"> 女
                      </label>
                    </div>
                </div>
               <div class="form-group">
                    <label for="" class="col-sm-2 control-label">班级</label>
                    <div class="col-sm-10">
                        <select class="form-control" name="cls_id" >
                            {% for row in class_list %}
                                <option value="{{ row.id }}">{{ row.classname }}</option>
                            {% endfor %}
                        </select>
                    </div>
              </div>
            </form>
      </div>
      <div class="modal-footer">
          <span id="errorrMsg" style="color:red;"></span>
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="btnSave">保存</button>
      </div>
    </div>
  </div>
</div>

{#删除学生#}
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
      <div class="alert alert-danger" role="alert">
            <h4>删除学生信息</h4>
          <div>...<input style="display: none;" type="text" id="delNid"/></div>
      </div>
      <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button  id="delConfirm" type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>
{##}
{#编辑学生#}
<div class="modal fade" id="eidtModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title " id="myModalLabel" >修改学生</h4>
      </div>
{#        #from表单#}
      <div class="modal-body">
          <form class="form-horizontal">
              <input type="text" class="form-control" style="display: none" name="nid" >

              <div class="form-group">
                    <label for="stdname" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="eidtname" name="stdname" placeholder="姓名">
                    </div>
              </div>
              <div class="form-group">
                    <label for="stdage" class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" name="stdage" placeholder="年龄">
                    </div>
              </div>

                <div class="form-group">
                    <label  class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                      <label class="radio-inline">
                                <input type="radio" name="stdgender" value="1"> 男
                      </label>

                      <label class="radio-inline">
                                <input type="radio" name="stdgender" value="0"> 女
                      </label>
                    </div>
                </div>
               <div class="form-group">
                    <label for="" class="col-sm-2 control-label">班级</label>
                    <div class="col-sm-10">
                        <select class="form-control" name="eidt_cls" >
                            {% for row in class_list %}
                                <option value="{{ row.id }}">{{ row.classname }}</option>
                            {% endfor %}
                        </select>
                    </div>
              </div>
            </form>
      </div>
      <div class="modal-footer">
          <span id="errorrMsg" style="color:red;"></span>
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="btneidt">保存</button>
      </div>
    </div>
  </div>
</div>





<script src="/static/js/jquery-3.1.1.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>


<script>
{#    #页面加载完毕后执行下面的函数#}
    $(function () {
        bindEvent();
        bindSave();
        bindDel();
        bindDelConfirm();
        bindEidt();
        bindEidtConfirm();
    });
   function bindEidt() {
        $("#tb").on('click','.edit-row',function () {
            $('#eidtModal').modal('show');
            $(this).parent().prevAll().each(function () {
                var  v=$(this).text();
                var  n=$(this).attr('na');
                if (n=='cls_id'){
                     var cid=$(this).attr('cid')
                     $('#eidtModal select[name="eidt_cls"]').val(cid)}
                else if(n=='stdgender'){if(v=="True"){$('#eidtModal :radio[value="1"]').prop('checked',true)}
                     else {$('#eidtModal :radio[value="0"]').prop('checked',true);}}
                else{$('#eidtModal input[name="'+n+'"]').val(v)}
            })
        }
            )}

    function bindEidtConfirm() {
        $('#btneidt').click(function () {
            var postData = {};
            $('#eidtModal').find('input,select').each(function () {
                var v = $(this).val();
                var n = $(this).attr("name");
                if (n == 'stdgender') {
                    if ($(this).prop('checked')) {
                        postData[n] = v;
                    }
                }
                else {
                    postData[n] = v;
                }
            });
            $.ajax({
                        url: "/eidtstudent",
                        type: 'POST',
                        data: postData,
                        dataType: 'JSON',
                        success: function (arg) {
                            if (arg.status) {window.location.reload();}
                            else {alert(arg.message);}
                        }

                   })
        })

    }




  function bindDel() {
        $('#tb').on('click','.del-row',function () {
            $("#delModal").modal('show');
            var nid=$(this).parent().parent().attr('nid');

            var n=$('#delNid').val(nid);


           })
    }
    function bindDelConfirm() {
        $('#delConfirm').click(function () {
            var nid=$('#delNid').val();
            $.ajax(
                    {
                        url: '/delstudent',
                        type: "GET",
                        data: {'nid': nid},
                        success: function (arg) {
                            var dict = JSON.parse(arg);
                            if (dict.status) {
                                $('tr[n>).remove()
                            }
                              $("#delModal").modal('hide')
                        }
                    }
            )
        })
    }
    function bindEvent() {
        $('#addBtn').click(function () {
            $('#addModal').modal('show')
        })
    }

    function bindSave() {
           $('#btnSave').click(function () {
            var postData = {};
            $('#addModal').find('input,select').each(function () {
                var v = $(this).val();

                var n = $(this).attr("name");
                if(n=='gender'){
                    if($(this).prop('checked')){
                        postData[n] = v;
                    }
                }else{
                    postData[n] = v;
                }
            });
               console.log(postData);
            $.ajax({
                url:'/addstudent/',
                type:'POST',
                data:postData,
                success:function (arg) {
                     // arg是字符串
                    // JSON.parse将字符串转换成字典， json.loads
                    var dict=JSON.parse(arg);
                    if (dict.status){
{#                        window.location.reload();#}
                        createRow(postData,dict.data);
                    $('#addModal').modal('hide');

                    }else {$('#errorrMsg').text(dict.message);}}
            })
        });
    }

    function createRow(postData,nid) {

        var tr=document.createElement('tr');
         $(tr).attr('nid',nid)
        var tdid=document.createElement('td');
        tdid.innerHTML=nid;
        $(tr).append(tdid)

        var tdusername=document.createElement('td')
        tdusername.innerHTML=postData.username;
        $(tr).append(tdusername);

        var tdage=document.createElement('td');
        tdage.innerHTML=postData.age;
        $(tr).append(tdage);

        var tdgender = document.createElement('td');
        if(postData.gender=='0'){
            tdgender.innerHTML='False';
        }else{
            tdgender.innerHTML='True';
        }
        $(tr).append(tdgender);

        var tdcls=document.createElement('td');
        var text1=$('select[name="cls_id"]').find('option[value="'+postData.cls_id+'"]').text();
        tdcls.innerHTML=text1;
        $(tr).append(tdcls);

        var tdhandle='<td><a class="glyphicon glyphicon-remove icon del-row"></a><a class="fa fa-pencil-square-o icon edit-row"></a></td>'
         $(tr).append(tdhandle);
         $('#tb').append(tr);

            }
</script>
</body>
</html>