生活随笔
收集整理的這篇文章主要介紹了
ajaxbootstrap
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.ajax
# 通過(guò)flask框架搭建后臺(tái)from flask import flask,request# 創(chuàng)建一個(gè)服務(wù)器對(duì)象app = Flask(__name__)# 解決ajax請(qǐng)求跨域問(wèn)題from flask_cors import CORSCORS(app,supports_credentials = True) # ??????????# 設(shè)置處理請(qǐng)求的功能(路由rote --> 接口)# 設(shè)置一個(gè)主頁(yè)路由器，對(duì)應(yīng)一個(gè)處理主頁(yè)的功能方法，返回主頁(yè)信息@app.route('/')
def home_action():return '<h1 style="color:red">home page</h1>'# 為ajax登錄請(qǐng)求配置一個(gè)處理登錄的功能@app.route('/login')
def login_action():# 拿到前臺(tái)數(shù)據(jù)，進(jìn)行數(shù)據(jù)判斷user = request.args['user'] # 'user'是規(guī)定前臺(tái)需要傳入的數(shù)據(jù)的keypwd = request.args['pwd']if user == 'abc' and pwd == '123':return 'login success'return 'login fail'# 啟動(dòng)服務(wù)(改文件作為自啟文件)
if __name__ == '__main__':app.run(port = '8888')
<!--form表單前后臺(tái)交互--><h1>請(qǐng)先登錄</h1><form class='fm'><input id = 'user' type='text' name = 'user' placeholder = '請(qǐng)輸入用戶名'><input id = 'user' type='text' name = 'pwd' placeholder = '請(qǐng)輸入密碼'><input class = 'sbm' type='submit' value='提交'
</form> // 取消表單默認(rèn)事件$('.fm').submit(function(){return false;})// 表單提交完成的是ajax請(qǐng)求
$('.sbm').click(function(){// 前提:準(zhǔn)備發(fā)送的數(shù)據(jù)var user = $('#user').val();var pwd = $('#pwd').val();// 1.通過(guò)ajax發(fā)送請(qǐng)求,獲得后臺(tái)響應(yīng)結(jié)果// 2.用得到的結(jié)果來(lái)局部渲染頁(yè)面內(nèi)容$.ajax({url:'http://127.0.0.1:8888/login',data:{user:user,pwd:pwd},success:function(data){doSomething(data);}})
})// 處理數(shù)據(jù)后，的功能
function doSomething(data){$('h1').text(datae)
}
2.bootstrap
<head><!-- 在head標(biāo)簽上部導(dǎo)入bs的css --><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"><!-- 再導(dǎo)入自定義修改的css --><link rel="stylesheet" href="css/my.css">
</head>
<body>
<!-- html代碼結(jié)構(gòu) -->...<!--bs的腳本依賴于jq, 所以要提前導(dǎo)入jq-->
<!--腳本邏輯盡量放在html結(jié)構(gòu)之下-->
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
<!--總結(jié); 兩種容器(container | container-fluid)默認(rèn)有左右15px padding--><!--固定寬度容器(采用響應(yīng)式布局)--><div class="container"><!-- 行: .row, 可以取消容器的默認(rèn)左右15px padding--><div class="row"><h1 class="bg-info">標(biāo)題</h1></div>
</div><!--動(dòng)態(tài)寬度布局(采用流式布局)--><div class="container-fluid"><div class="row"><h1 class="bg-info">標(biāo)題</h1></div>
</div>
轉(zhuǎn)載于:https://www.cnblogs.com/oden/p/10197830.html
總結(jié)
以上是生活随笔為你收集整理的ajaxbootstrap的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
