form表单/ajax/bootstrap

一、DOM

'''
// sup.append(sub); 在sup的最后方添加sub
// $('body').append($box);
​
// sub.appendTo(sup); 将sub插入到sup的最后放
// $box.appendTo($('body'));
​
// sup.prepend(sub); 在sup的最前方添加sub
// $('body').prepend($box);
​
// 在wrapper后添加box
// $('.wrapper').after($box);
​
// box插入到wrapper前
// $box.insertBefore($('.wrapper'))
​
// 所有wrapper被box替换
// $('.wrapper').replaceWith($box)
​
// 用box把所有的wrapper替换掉
// $box.replaceAll($('.wrapper'))
​
// $('.wrapper').empty();
// $('.wrapper').html("");
​
$('.ele').click(function () {
    alert($(this).text())
});
​
// 自删: remove()不保留事件  detach()保留事件
// var $ele = $('.ele').remove();
var $ele = $('.ele').detach();
​
'''
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOM操作</title>
    <style>
        .wrapper {
            width: 450px;
            margin: 50px auto;
            background-color: pink;
        }
        .wrapper:after {
            content: "";
            display: block;
            clear: both;
        }
        .box {
            width: 150px;
            height: 150px;
            background-color: red;
            border-radius: 50%;
            float: left;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <!--3 x 3的9个圆-->
        <!--重复来创建 => 循环-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
    </div>
    <!--<div class="wrapper"></div>-->
​
    <div class="ele">123</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 1.创建页面元素对象
    var $box = $('<div></div>');
​
    // 2.操作页面元素对象
    $box.addClass('box');
    console.log($box);
​
    // 3.添加到页面的指定位置
    // $('.wrapper').append($box);
​
    // sup.append(sub); 在sup的最后方添加sub
    // $('body').append($box);
​
    // sub.appendTo(sup); 将sub插入到sup的最后放
    // $box.appendTo($('body'));
​
    // sup.prepend(sub); 在sup的最前方添加sub
    // $('body').prepend($box);
​
    // 在wrapper后添加box
    // $('.wrapper').after($box);
​
    // box插入到wrapper前
    // $box.insertBefore($('.wrapper'))
​
    // 所有wrapper被box替换
    // $('.wrapper').replaceWith($box)
​
    // 用box把所有的wrapper替换掉
    // $box.replaceAll($('.wrapper'))
​
    // $('.wrapper').empty();
    // $('.wrapper').html("");
​
    $('.ele').click(function () {
        alert($(this).text())
    });
​
    // 自删: remove()不保留事件  detach()保留事件
    // var $ele = $('.ele').remove();
    var $ele = $('.ele').detach();
​
    console.log($ele);
    $('body').append($ele);
​
​
</script>
​
<script>
    // 0.前提: 布局
    for (var i = 0; i < 9; i++) {
        // 1.创建
        var $box = $('<div class="box"></div>');
        // 2.设置
        $box.click(function () {
            alert($(this).index())
        });
        // 3.添加
        $('.wrapper').append($box);
    }
</script>
</html>
View Code

二、表单

```html
<!-- action: 请求的后台链接地址 -->
<!-- method: 请求方式 get | post -->
<form action="" method="post">
    <!--可以提交给后台的数据: 必须有唯一标识, 用name属性来标识-->
​
    <!--表单元素对象input通过设置type来实现不同的功能-->
    <div>
        <label for="usr">用户名:</label>
        <input type="text" id="usr" name="usr" value="000">
    </div>
    <div>
        <label for="pwd">密码:</label>
        <input type="password" id="pwd" name="pwd" placeholder="请输入密码">
    </div>
    
    <!--文本域-->
    <textarea></textarea>
    
    <!--列表-->
    <select name="sex">
        <option value="male">男</option>
        <option value="female">女</option>
        <option value="other">哇塞</option>
    </select>
​
    <!--单选框, name来关联, checked为默认选中项-->
    <div>
        男<input type="radio" name="gender">
        女<input type="radio" name="gender" checked>
    </div>
​
    <!--复选框, name来关联-->
    <div>
        爱好:
        男<input type="checkbox" name="like" value="male">
        女<input type="checkbox" name="like" value="female" checked>
    </div>
    
    <div>
        <button type="button">普通按钮</button>
        <button type="reset">重置</button>
        <button type="submit">提交</button>
        <input type="submit" value="我也是提交">
    </div>
</form> 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
</head>
<body>
​
<div class="box">获取用户名输入框内容</div>
​
<form action="" method="post">
    <!--可以提交给后台的数据: 必须有唯一标识-->
​
    <!--表单元素对象input通过设置type来实现不同的功能-->
    <div>
        <label for="usr">用户名:</label>
        <input type="text" id="usr" name="usr" value="000">
    </div>
    <div>
        <label for="pwd">密码:</label>
        <input type="password" id="pwd" name="pwd" placeholder="请输入密码">
    </div>
    
    <!--文本域-->
    <textarea></textarea>
    
    <!--列表-->
    <select name="sex">
        <option value="male">男</option>
        <option value="female">女</option>
        <option value="other">哇塞</option>
    </select>
​
    <!--单选框-->
    <div>
        男<input type="radio" name="gender">
        女<input type="radio" name="gender" checked>
    </div>
​
    <!--复选框-->
    <div>
        爱好:
        男<input type="checkbox" name="like" value="male">
        女<input type="checkbox" name="like" value="female" checked>
    </div>
    
    <div>
        <button type="button">普通按钮</button>
        <button type="reset">重置</button>
        <button type="submit">提交</button>
        <input type="submit" value="我也是提交">
    </div>
</form>
</body>
<script src="js/jquery-3.3.1.js"></script>
​
<script>
    $(function () {
        $('.box').click(function () {
            // val()就是表单元素对象的内容, 对应html就是value全局属性
            var val = $('#usr').val();
            if (val) {
                $(this).text(val);
            }
        });
​
        // 如何取消form表单默认事件 => 目的:拿到表单数据,用ajax来提交给后台
        // form: 提交数据一定会刷新页面
        // ajax: 可以完成局部数据刷新
        // $('form').submit(function () {  // 取消form表单的默认事件, 不主动提交数据
        //     return false;
        // });
​
        
        $('button').click(function () {
            console.log("提交按钮点击了")
        })
    })
</script>
</html>
View Code

三、flask实现简易后台

from flask import Flask, request
from flask_cors import CORS
​
# 创建服务器对象
app = Flask(__name__)
# 解决跨越, 数据在两个服务器之间传输
CORS(app, supports_credentials=True)
​
# 将请求路径与逻辑函数形成一一对应关系
@app.route('/') # http://127.0.0.1:5000/
def home():
    return "<h1>主页</h1>"
​
@app.route('/index') # http://127.0.0.1:5000/index
def index():
    return "<h1 style='text-align:center;color:red'>index页面</h1>"
​
@app.route('/test') # http://127.0.0.1:5000/test
def test():
    # print(request)
    # print(type(request))
    a = request.args['a'] # 通过request对象的args拿到前台数据
    b = request.args['b']
    return a + b
​
# 为form表单登录请求提供处理逻辑 => 前端一定会出现页面转跳
@app.route('/login')
def login():
    usr = request.args['usr']
    pwd = request.args['pwd']
​
    if usr == 'abc' and pwd == '123':
        return "登录成功页面"
    return "登录失败页面"
​
​
@app.route('/loginAjax')
def login_ajax():
    usr = request.args['usr']
    pwd = request.args['pwd']
​
    if usr == 'abc' and pwd == '123':
        return "登录成功"
    return "登录失败"
​
# 自启文件, 启动falsk服务器
if __name__ == "__main__":
    app.run()  # port=6666 可以设置端口号

五、form请求后台(会在服务器地址上发送页面转跳, 不需要处理跨越问题)

<!--action: 请求的链接地址 -->
<form action="http://127.0.0.1:5000/login" method="get">
    <div class="row">
        <label for="usr">用户名:</label>
        <input id="usr" name="usr" type="text" placeholder="请输入用户名">
    </div>
    <div class="row">
        <label for="pwd">密码:</label>
        <input id="pwd" name="pwd" type="password" placeholder="请输入密码">
    </div>
    <div class="row">
        <button type="submit">登录</button>
    </div>
</form>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
</head>
<body>
<!--action: 请求的链接地址 -->
<form action="http://127.0.0.1:5000/login" method="get">
    <div class="row">
        <label for="usr">用户名:</label>
        <input id="usr" name="usr" type="text" placeholder="请输入用户名">
    </div>
    <div class="row">
        <label for="pwd">密码:</label>
        <input id="pwd" name="pwd" type="password" placeholder="请输入密码">
    </div>
    <div class="row">
        <button type="submit">登录</button>
    </div>
</form>
</body>
</html>
View Code

六、ajax请求后台(数据在两个服务器上传递, 需要处理跨越问题)

<h1>登录</h1>
<form action="" method="">
    <div class="row">
        <label for="usr">用户名:</label>
        <input id="usr" name="usr" type="text" placeholder="请输入用户名">
    </div>
    <div class="row">
        <label for="pwd">密码:</label>
        <input id="pwd" name="pwd" type="password" placeholder="请输入密码">
    </div>
    <div class="row">
        <button type="submit">登录</button>
    </div>
</form>
​
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 取消form表单默认提交数据的事件
    $('form').submit(function () {
        return false;
    });
​
    // 用button点击发送ajax请求来完成数据交互 => 局部刷新
    $('button').click(function () {
        console.log("ajax请求...");
        // 获取用户输入的账户密码
        var usrStr = $('#usr').val();
        var pwdStr = $('#pwd').val();
​
        // ajax发送前台请求
        $.ajax({
            url: "http://127.0.0.1:5000/loginAjax",  // 请求地址
            data: {
                usr: usrStr, // 把用户数据提交给后台的key
                pwd: pwdStr
            },
            success: function (arg) { // 请求成功的回调函数 arg后台返回的数据结果
                console.log(arg);
                // 局部刷新前台页面内容
                $('h1').text(arg);
            }
        })
​
    })
​
</script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ajax登录</title>
</head>
<body>
<h1>登录</h1>
<form action="" method="">
    <div class="row">
        <label for="usr">用户名:</label>
        <input id="usr" name="usr" type="text" placeholder="请输入用户名">
    </div>
    <div class="row">
        <label for="pwd">密码:</label>
        <input id="pwd" name="pwd" type="password" placeholder="请输入密码">
    </div>
    <div class="row">
        <button type="submit">登录</button>
    </div>
</form>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 取消form表单默认提交数据的事件
    $('form').submit(function () {
        return false;
    });
​
    // 用button点击发送ajax请求来完成数据交互 => 局部刷新
    $('button').click(function () {
        console.log("ajax请求...");
        // 获取用户输入的账户密码
        var usrStr = $('#usr').val();
        var pwdStr = $('#pwd').val();
​
        $.ajax({
            url: "http://127.0.0.1:5000/loginAjax",  // 请求地址
            data: {
                usr: usrStr, // 把用户数据提交给后台的key
                pwd: pwdStr
            },
            success: function (arg) { // 请求成功的回调函数  arg后台返回的数据结果
                console.log(arg);
                $('h1').text(arg);
            }
        })
    })
​
</script>
</html>
View Code

七、bootstrap入门

　　用bootstrap规定好的html结构来构建html结构, 再给具体的标签特定的类名(特定的全局属性),就能实现特定的页面样式与功能。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bs入门</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        #hehe {
            color: red;
            font-size: 100px;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<button type="button" class="btn btn-warning">按钮</button>
<i class="glyphicon glyphicon-arrow-down"></i>

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-header">我是分组标题</li>
        <li class="bg-success"><a href="#">123</a></li>
        <li class="disabled"><a href="#">123</a></li>
        <li class="dropdown-header">我是分组标题</li>
        <li><a href="#" id="hehe">123</a></li>
    </ul>
</div>

<!--用bs规定好的html结构来构建html结构, 再给具体的标签特定的类名(特定的全局属性)-->
<!--就能实现特定的页面样式与功能-->
</body>
<script src="js/jquery-3.3.1.js"></script>
<!--注: bs是基于jq框架-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>

    $('#hehe').click(function () {

        alert("呵呵");
        return false;
    })
</script>

</html>
View Code
posted @ 2019-01-28 20:43  zhao_peng  阅读(1822)  评论(0)  编辑  收藏  举报