生活随笔
收集整理的這篇文章主要介紹了
ajaxbootstrap
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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'是規定前臺需要傳入的數據的keypwd = 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
總結
以上是生活随笔為你收集整理的ajaxbootstrap的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
