flask之使用ajax實現點選左側邊欄,不重新整理顯示右邊內容
阿新 • • 發佈:2019-01-06
在實現點選左側導航欄,右側不重新整理頁面顯示網頁內容的方法有很多,可以通過ifram實現、可以使用div繫結a或者li的點選事件 阻止a的預設行為,用jQuery的load()可以來載入這個div,即將網頁放入div中,當然也可以用下面的方式實現,採用ajax技術實現區域性重新整理,有人說下面的方法比較麻煩,我感覺還好,比較適合自己的需求,實現也比較簡單,通過flask提供web服務,使用ajax非同步載入,特別的簡單,就不在細說,直接看程式碼吧。
server.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/product/list")
def product_list():
return render_template("productList.html")
@app.route("/user/list")
def user_list():
return render_template("userList.html")
@app.route("/record/list")
def record_list():
return render_template("recordList.html" )
if __name__ == "__main__":
app.run(debug=True)
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <%-- 在IE執行最新的渲染模式 --%>
<!--<meta name="viewport" content="width=device-width, initial-scale=1"> <%-- 初始化移動瀏覽顯示 --%>-->
<meta name="Author" content="Dreamer-1.">
<!-- 引入各種CSS樣式表 -->
<link rel="stylesheet" href="../static/css/bootstrap.css">
<link rel="stylesheet" href="../static/css/font-awesome.css">
<link rel="stylesheet" href="../static/css/index.css"> <!-- 修改自Bootstrap官方Demon,你可以按自己的喜好制定CSS樣式 -->
<link rel="stylesheet" href="../static/css/font-change.css"> <!-- 將預設字型從宋體換成微軟雅黑(個人比較喜歡微軟雅黑,移動端和桌面端顯示效果比較接近) -->
<script type="text/javascript" src="../static/js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<title>- 後臺管理系統 -</title>
</head>
<body>
<!-- 頂部選單(來自bootstrap官方Demon)==================================== -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">XXXX.com</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="###" onclick="showAtRight('/user/list')"><i class="fa fa-users"></i> 使用者列表</a></li>
<li><a href="###" onclick="showAtRight('/product/list')"><i class="fa fa-list-alt"></i> 產品列表</a></li>
<li><a href="###" onclick="showAtRight('/record/list')" ><i class="fa fa-list"></i> 訂單列表</a></li>
</ul>
</div>
</div>
</nav>
<!-- 左側選單選項========================================= -->
<div class="container-fluid">
<div class="row-fluie">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<!-- 一級選單 -->
<li class="active"><a href="#userMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
<i class="fa fa-user"></i> 使用者管理 <span class="sr-only">(current)</span></a>
</li>
<!-- 二級選單 -->
<!-- 注意一級選單中<a>標籤內的href="#……"裡面的內容要與二級選單中<ul>標籤內的id="……"裡面的內容一致 -->
<ul id="userMeun" class="nav nav-list collapse menu-second">
<li><a href="###" onclick="showAtRight('/user/list')"><i class="fa fa-users"></i> 使用者列表</a></li>
</ul>
<li><a href="#productMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
<i class="fa fa-globe"></i> 產品管理 <span class="sr-only">(current)</span></a>
</li>
<ul id="productMeun" class="nav nav-list collapse menu-second">
<li><a href="###" onclick="showAtRight('/product/list')"><i class="fa fa-list-alt"></i> 產品列表</a></li>
</ul>
<li><a href="#recordMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
<i class="fa fa-file-text"></i> 訂單管理 <span class="sr-only">(current)</span></a>
</li>
<ul id="recordMeun" class="nav nav-list collapse menu-second">
<li><a href="###" onclick="showAtRight('/record/list')" ><i class="fa fa-list"></i> 訂單列表</a></li>
</ul>
</ul>
</div>
</div>
</div>
<!-- 右側內容展示================================================== -->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header"><i class="fa fa-cog fa-spin"></i> 控制檯<small> 歡迎使用XXX後臺管理系統</small></h1>
<!-- 載入左側選單指向的jsp(或html等)頁面內容 -->
<div id="content">
<h4>
<strong>使用指南:</strong><br>
<br><br>預設頁面內容……
</h4>
</div>
</div>
<script type="text/javascript">
function showAtRight(url){
$.ajax({
type :"GET",
url : url,
dataType:"html",
success : function(data) {//返回資料根據結果進行相應的處理
$("#content").html(data);
},
error:function(){
$("#content").html("獲取資料失敗!");
}
});
}
</script>
</body>
</html>
productList.html
<div>
我是產品列表 ╰( ̄▽ ̄)╭
</div>
recordList.html
<div>
我是產品列表 ╰( ̄▽ ̄)╭
</div>
userList.html
<div>
我是使用者列表 (っ´Ι`)っ
<input type="file" value="按鈕">
</div>
效果如下: