day56
day 56 ajax前后台交互
bootstrap中文网
#http协议:无连接,无状态
前台发送请求给后台(请求方式,请求路径,请求内容),后台返回相应给前台(页面,数据)
ajax完成的是页面中的局部数据请求,不会发生页面改变.
http响应头
环境
pip3 install flask
国内源
pip3 install -i https://pypi.douban.com/simple flask-cors
#######前后台交互
###py文件
import socket
server = socket.socket()
server.bind(("localhost",8888))
server.listen(5)
print("请求: http://localhost:8888")
while True:
client, _ = server.accept()
data= client.recv(1024)
# print(data)
# print(data.decode("utf-8"))
request_data = data.decode('utf-8')
header= request_data.split('\r\n')[0]
router=header.split(' ')[1]
client.send(b'HTTP1.1 200 OK\r\nContent-Type: text/html;charset=utf8\r\n\r\n')
if router == '/index':
with open('1.请求.html','rb') as rf:
client.send(rf.read())
else:
client.send(b'404')
client.close()
##1.请求.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>请求</h1>
</body>
</html>
###ajax请求后台
##flask_service文件
from flask import Flask,request
#解决跨域问题
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
#处理路由
@app.route('/')
@app.route('/index')
def home():
return '<h1>Home page</h1>'
@app.route('/favicon.ico')
def icon():
with open('img/favicon.ico','rb') as f:
data= f.read()
return data
#拿到前台的数据,完成数据的响应
@app.route('/get_data',methods=['GET','POST'])
def get_data():
print(request.method)
if request.method == 'GET':
username = request.args['username']
print(username)
if request.method == 'POST':
username= request.form['username']
password=request.form['password']
if username=='ycl' and password == '123':
return 'login success'
return 'failed'
return '后台数据'
if __name__ == '__main__':
app.run(host='localhost',port=8888)
###ajax请求html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>ajax请求</h1>
<form action="">
<input type="text" name="username" id="username">
<input type="text" name="password" id="password">
<button id="btn" type="button">登录</button>
</form>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
$('#btn').click(function () {
usr = $('#username').val();
pwd = $('#password').val();
if (usr && pwd) { //如果有内容
//前台自己用
//console.log(ctx);
//发送给后台
$.ajax({
//请求的后台地址:接口
url:'http://localhost:8888/get_data',
//请求的方式,get,post
type:'post',
//提交给后台的数据
data:{
username:usr, //后台取数据的key:后台要发送的数据
password:pwd
},
//后台成功的响应
success:function (response) {
console.log(response)
},
//后台错误的响应
error:function (error) {
console.log(error)
}
})
}
})
</script>
</html>
#前面加个加号就变成数字了
console.log(+'123')
#bootstrap
导入bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<button class="btn btn-danger btn-block">按钮</button>
<!-- Single button 这个是复制的boot里面的代码-->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">下拉框</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>
</div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
#可以在style里面写入自己的样式,自己起个class名字
##栅格系统
1.一共四种尺寸
