ajax&bootstrap

最新推荐文章于 2022-05-04 17:12:37 发布

weixin_30851867

最新推荐文章于 2022-05-04 17:12:37 发布

阅读量55

点赞数

文章标签： javascript python ViewUI

原文链接：http://www.cnblogs.com/oden/p/10197830.html

版权

1.ajax

后台

# 通过flask框架搭建后台

from flask import flask,request

# 创建一个服务器对象

app = Flask(__name__)

# 解决ajax请求跨域问题

from flask_cors import CORS

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

转载于:https://www.cnblogs.com/oden/p/10197830.html