Flask简易版本AjaxDOM操作,表单操作

Posted 刘小鹿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flask简易版本AjaxDOM操作,表单操作相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>结构关系</title>
</head>
<body>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>
        <i>列表项</i>
        <b>4</b>
    </li>
    <li>列表项5</li>
    <li>列表项6</li>
    <li>列表项7</li>
</ul>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(\'li\').eq(3).click(function () {
        console.log(this);
        $this = $(this);
        console.log($this.prev().get(0));
        console.log($this.prevAll());
        console.log($this.next());
        console.log($this.parent());
        console.log($this.parents());
        console.log($this.children().eq(1));
        console.log($this.siblings());
    })
</script>
</html>
结构关系

一: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>
jqDOM操作
<!-- 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>
表单操作注释

二: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 可以设置端口号
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 可以设置端口号
服务器
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
</head>
<body>
<!--action: 请求的链接地址 -->
<form action="Flask 系列之 Pagination

Flask之表单操作

flask表单操作

python实战flask简易登陆注册

flask学习笔记(-Web 表单)

Python---Flask--03--Web表单