前后台交互， 按钮， 输入栏，列表，选项 ,dom

Posted 2021-02-07 wrqysrt

按钮

<button type=‘buttton‘></button>不提交触发点击事件

<button type="reset"></button>重置触发点击事件

<button type="submit"></button>提交

  <input type="submit" value="我也是提交">提交不触发点击事件

输入栏

<div>
<label for="usr">用户名:</label>点击显示
<input type="text" id="usr" name="usr" value="000"> value默认值
</div>
<div>
<label for="pwd">密码:</label>
<input type="password" id="pwd" name="pwd" placeholder="请输入密码">灰字提示
</div>

列表

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

<!--复选框, name来关联-->
<div>
爱好:
男<input type="checkbox" name="like" value="male">
女<input type="checkbox" name="like" value="female" checked>
</div>

 

 

 

### flask实现简易后台

```python
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请求后台(会在服务器地址上发送页面转跳, 不需要处理跨越问题)

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

 

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();