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