jQuery-结构关系-jqDOM操作-表单-ajax完成登陆

最新推荐文章于 2024-02-28 16:51:01 发布

zdc45625

最新推荐文章于 2024-02-28 16:51:01 发布

阅读量179

点赞数 1

分类专栏：前端学习

本文链接：https://blog.csdn.net/zdc45625/article/details/86683642

版权

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

结构关系

<!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>

jqDOM操作

<!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>

表单

<!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>

server

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 可以设置端口号
    
==============================login页面.html================================
<!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>

ajax完成登陆

<!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>