1.ajax
后台
# 通过flask框架搭建后台from flask import flask,request# 创建一个服务器对象app = Flask(__name__)# 解决ajax请求跨域问题from flask_cors import CORSCORS(app,supports_credentials = True) ??# ??????????# 设置处理请求的功能(路由rote --> 接口)# 设置一个主页路由器，对应一个处理主页的功能方法，返回主页信息@app.route(‘/‘)def home_action(): ???return ‘<h1 style="color:red">home page</h1>‘# 为ajax登录请求配置一个处理登录的功能@app.route(‘/login‘)def login_action(): ???# 拿到前台数据，进行数据判断 ???user = request.args[‘user‘] ????# ‘user‘是规定前台需要传入的数据的key ???pwd = request.args[‘pwd‘] ???if user == ‘abc‘ and pwd == ‘123‘: ???????return ‘login success‘ ???return ‘login fail‘# 启动服务(改文件作为自启文件)if __name__ == ‘__main__‘: ???app.run(port = ‘8888‘)- 前台
<!--form表单前后台交互--><h1>请先登录</h1><form class=‘fm‘> ???<input id = ‘user‘ type=‘text‘ name = ‘user‘ placeholder = ‘请输入用户名‘> ???<input id = ‘user‘ type=‘text‘ name = ‘pwd‘ placeholder = ‘请输入密码‘> ???<input class = ‘sbm‘ type=‘submit‘ value=‘提交‘</form>// 取消表单默认事件$(‘.fm‘).submit(function(){return false;})// 表单提交完成的是ajax请求$(‘.sbm‘).click(function(){ ???// 前提:准备发送的数据 ???var user = $(‘#user‘).val(); ???var pwd = $(‘#pwd‘).val(); ???????// 1.通过ajax发送请求,获得后台响应结果 ???// 2.用得到的结果来局部渲染页面内容 ???$.ajax({ ???????url:‘http://127.0.0.1:8888/login‘, ???????data:{user:user,pwd:pwd}, ???????success:function(data){doSomething(data);} ???})})// 处理数据后，的功能function doSomething(data){ ???$(‘h1‘).text(datae)}2.bootstrap
引入
<head> ???<!-- 在head标签上部导入bs的css --> ???<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> ???<!-- 再导入自定义修改的css --> ???<link rel="stylesheet" href="css/my.css"></head><body><!-- html代码结构 --> ???... ???<!--bs的脚本依赖于jq, 所以要提前导入jq--><!--脚本逻辑尽量放在html结构之下--><script src="js/jquery-3.3.1.js"></script><script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script></body>- 容器
<!--总结; 两种容器(container | container-fluid)默认有左右15px padding--><!--固定宽度容器(采用响应式布局)--><div class="container"> ???<!-- 行: .row, 可以取消容器的默认左右15px padding--> ???<div class="row"> ???????<h1 class="bg-info">标题</h1> ???</div></div><!--动态宽度布局(采用流式布局)--><div class="container-fluid"> ???<div class="row"> ???????<h1 class="bg-info">标题</h1> ???</div></div>ajax&bootstrap
原文地址：https://www.cnblogs.com/oden/p/10197830.html