模态对话框

最新推荐文章于 2023-09-17 16:35:05 发布

weixin_30316097

最新推荐文章于 2023-09-17 16:35:05 发布

阅读量182

点赞数 1

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/fan-1994716/p/11172880.html

版权

笔记：模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow{
            background-color: black;
            height: 1000px;
            position:fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            opacity:0.4;
            z-index:999;
            display:none;
        }
        .content{
            background-color: white;
            width: 500px;
            height: 400px;
            position:fixed;
            top:100px;
            left:300px;
            right:200px;
            z-index:1000;
            display: none;

        }
    </style>
</head>
<body>
<button id="btn">点我</button>
<div class="shadow"></div>
<div class="content">
    <form action="">
        用户名：<input type="text">
        <input type="submit">
        <input type="button" id="cancel" value="取消">

    </form>

</div>
</body>
<script
src="http://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>

{#<script src="/static/js/jquery-3.4.1.js"></script>#}
<script>
$('#btn').click(function () {
$('.shadow').show();

        $('.content').show();
    });
    $('#cancel').click(function () {
        $('.shadow').hide();

$('.content').hide();
})

</script>

</html>

ajax：是无刷新的情况下进行数据的前后台交互，无刷新浏览器技术

form 表单：<form action="/up_class/" method="post">
    <input type="hidden" name="classid" value="{{ classid }}">
    班级名称: <input type="text" name="classname" value="{{ classname }}">
    <input type="submit" value="提交"> 按钮

     班级名：<input type="text" name="classname">
        <input type="button" value="提交" id="commit"> 按钮
        <input type="button" id="cancel" value="取消"> 按钮

console.log('kkk') 可以在控制台打印出来

模态对话框-更新
       <tr>
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>
                  <a href="/del_class/?id={{ item.id }}">删除</a>|
                  <a href="/up_class/?id={{ item.id }}">更新</a>
                  <button class="ajax_class_modal">ajax更新</button>
              </td>
          </tr>

           $('.ajax_class_modal').click(function () {
        $('.editshadow,.editcontent').show();
        {# 1、获取当前元素 2、获取他爹$(this).parent() 3、找大爷和二爷$(this).parent().prevALL()#}
        var tds=$(this).parent().prevAll(); [<td>{{ item.name }}</td>， <td>{{ item.id }}</td>]
        var classname=tds[0];
        console.log(classname）
    });
   对DOM对象加$():
tds[0]====>$(tds[0])

Jquery===>DOM :
直接按索引取值：var tds=$(this).parent().preALL()   ==>tds[0]
操作成功： res['code']=1000
                  res['data']='success'
           返回： return HttpResponse(json.dumps(res))
操作失败：   res['code']=10001
                   res['data']=str(e)
                  return HttpResponse(str(e))
js中反序列化：json.parse==loads
                        console.log(data);
                       res=JSON.parse(data);
                      console.log(data)
js的序列化：
                   JSON.stringfy(res)

跳转的两种方式：window.location.href='/classes/';
window.location.reload(); 刷新当前页面

转载于:https://www.cnblogs.com/fan-1994716/p/11172880.html

weixin_30316097

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模态对话框

笔记：模态对话框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .shadow{ background-color: black;...
复制链接

扫一扫