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">   <%&#45;&#45; 初始化移動瀏覽顯示 &#45;&#45;%>-->
        <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>&nbsp; 使用者管理 <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>&nbsp; 產品管理 <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>&nbsp; 訂單管理 <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>&nbsp;控制檯<small>&nbsp;&nbsp;&nbsp;歡迎使用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>

效果如下：
這裡寫圖片描述

flask之使用ajax實現點選左側邊欄，不重新整理顯示右邊內容

flask之使用ajax實現點選左側邊欄，不重新整理顯示右邊內容

ajax實現點選左側選單，右側載入不同網頁

使用網頁巢狀iframe標籤，點選左側導航欄，在右側動態顯示頁面的資訊

zTree樹外掛實現點選左側樹，右側展示文章列表頁面實現思路

自定義控制元件之ImageView實現點選之後有陰影效果

django下使用ajax實現點選與翻頁功能

百度地圖API中使用ajax實現點選地圖生成標註並儲存到資料庫

js實現點選按鈕出現div，點選空白又消失

jquery實現點選縮圖在彈出層顯示原圖功能

實現點選上傳檔案將檔名稱顯示在text中

swing 自定義最小化按鈕後，實現點選工作列圖示，使窗體重新顯示

點選左側選單欄生成選項卡js程式碼

jquery實現點選步驟條變色，以及點選下一步變色

點選瀏覽器後退按鈕，重新重新整理頁面，而不是從快取中獲取頁面，PHP的解決方案

ASP.NET GridView 後臺繫結行點選行觸發SelectedIndexChanged，頁面重新整理後，只有一頁的情況下，事件只觸發一次

如何寫一個點選view帶動畫的下滑展開顯示隱藏內容的控制元件

如果寫一個點選view帶動畫的下滑展開顯示隱藏內容的控制元件

微信小程式，類似微信點選語音播放效果，不會互相干擾播放狀態

Android開發之TabLayout真正實現底部導航欄(可實現點選文字顏色圖片切換)

php 之管理後臺登陸超時點選左側選單跳轉出整個frameset 顯示登入（smallnews筆記）

flask之使用ajax實現點選左側邊欄，不重新整理顯示右邊內容

相關推薦