ajax&bootstrap
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>
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
