基於Layui+vue.js+ajax的地鐵查詢系統二
阿新 • • 發佈：2022-03-31
前端頁面，採用layui+vue.js+ajax進行表格渲染
完整程式碼如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>北京市地鐵管理系統</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <metaname="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script type="text/javascript" src="js/vue.min.js"></script> <script src="js/jquery-3.3.1.js"></script> <link rel="stylesheet" href="layui/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"media="all"> <!-- 注意：如果你直接複製所有程式碼到本地，上述css路徑需要改成你本地的 --> </head> <style> #Ai{ display: none; } #Bi { display: none; } #Ci{ display: none; } </style> <body> <fieldset class="layui-elem-field layui-field-title"style="margin-top: 50px;"> <legend>地鐵查詢</legend> </fieldset> <div class="layui-tab layui-tab-card"> <ul class="layui-tab-title"> <li class="layui-this">線路查詢</li> <li>站點查詢</li> <li>起點-終點查詢</li> </ul> <div class="layui-tab-content" style="height: 30px;"> <div class="layui-tab-item layui-show"> <div class="layui-form-item"> <label class="layui-form-label">線路查詢</label> <div class="layui-input-inline"> <input id ="Xid" type="text" required lay-verify="required" placeholder="請輸入線路名稱" autocomplete="off" class="layui-input"> </div> <button type="button" class="layui-btn" onclick="Information()">查詢</button> </div> </div> <div class="layui-tab-item"> <div class="layui-tab-item layui-show"> <div class="layui-form-item"> <label class="layui-form-label">站點查詢</label> <div class="layui-input-inline"> <input type="text" name="username" id="Zname" required lay-verify="required" placeholder="請輸入站點名稱" autocomplete="off" class="layui-input"> </div> <button type="button" class="layui-btn" onclick="ZInformation()">查詢</button> </div> </div> </div> <div class="layui-tab-item"> <div class="layui-tab-item layui-show"> <div class="layui-form-item"> <label class="layui-form-label">起點</label> <div class="layui-input-inline"> <input type="text" name="username" id ="start" required lay-verify="required" placeholder="請輸入起點名稱" autocomplete="off" class="layui-input"> </div> <label class="layui-form-label">終點</label> <div class="layui-input-inline"> <input type="text" name="username" id ="end"required lay-verify="required" placeholder="請輸入終點名稱" autocomplete="off" class="layui-input"> </div> <button type="button" class="layui-btn"onclick="SInformation()">查詢</button> </div> </div> </div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>Information</legend> </fieldset> <div class="layui-form" id="Ai"> <table class="layui-table" id="information"> <colgroup> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> </colgroup> <thead> <tr > <th>線路ID</th> <th>線路名稱</th> <th>車站ID</th> <th>車站名稱</th> <th>下一站名稱</th> </tr> </thead> <tbody> <tr v-for="site in itemss"> <td> {{ site.xid }}</td> <td> {{ site.xname }}</td> <td> {{ site.cid }}</td> <td> {{ site.zname}}</td> <td> {{ site.next }}</td> </tr> </tbody> </table> </div> <div class="layui-form" id="Bi"> <table class="layui-table" id="Zinformation"> <colgroup> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> </colgroup> <thead> <tr > <th>線路ID</th> <th>線路名稱</th> <th>車站ID</th> <th>車站名稱</th> <th>下一站名稱</th> </tr> </thead> <tbody> <tr v-for="site in itemss"> <td> {{ site.xid }}</td> <td> {{ site.xname }}</td> <td> {{ site.cid }}</td> <td> {{ site.zname}}</td> <td> {{ site.next }}</td> </tr> </tbody> </table> </div> <div class="layui-form" id="Ci"> <table class="layui-table" id="Sinformation"> <colgroup> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> </colgroup> <thead> <tr > <th>線路名稱</th> <th>車站名稱</th> <th>下一站名稱</th> <th>換乘線路</th> </tr> </thead> <tbody> <tr v-for="site in itemss"> <td> {{ site.xname }}</td> <td> {{ site.zname}}</td> <td> {{ site.next }}</td> <td> {{ site.changestop }}</td> </tr> </tbody> </table> </div> <script> function SInformation(){ var start=$("#start").val(); var end=$("#end").val(); var tableVue = new Vue({ el:"#Sinformation", data:{ itemss:[] } }); $.ajax({ url: "ServletStart?now=" + new Date().getTime(), type: "GET", data: {"start":start,"end":end}, success: function (data) { //var data = JSON.parse( jsonObj );//解析json物件 tableVue.itemss=data; },//響應成功後的回撥函式 error: function () { alert("出錯啦...") },//表示如果請求響應出現錯誤，會執行的回撥函式 dataType: "json"//設定接受到的響應資料的格式 }); document.getElementById("Bi").style.display="none"; document.getElementById("Ai").style.display="none"; document.getElementById("Ci").style.display="block"; } </script> <script> function Information(){ var Xid = $("#Xid").val(); var tableVue = new Vue({ el:"#information", data:{ itemss:[] } }); $.ajax({ url: "ServletXian", type: "GET", data: {"Xid":Xid}, success: function (data) { //var data = JSON.parse( jsonObj );//解析json物件 tableVue.itemss=data; },//響應成功後的回撥函式 error: function () { alert("出錯啦...") },//表示如果請求響應出現錯誤，會執行的回撥函式 dataType: "json"//設定接受到的響應資料的格式 }); document.getElementById("Bi").style.display="none"; document.getElementById("Ai").style.display="block"; } </script> <script> function ZInformation(){ var Zname = $("#Zname").val(); var tableVue = new Vue({ el:"#Zinformation", data:{ itemss:[] } }); $.ajax({ url: "ServletZhan", type: "GET", data: {"Zname":Zname}, success: function (data) { //var data = JSON.parse( jsonObj );//解析json物件 tableVue.itemss=data; },//響應成功後的回撥函式 error: function () { alert("出錯啦...") },//表示如果請求響應出現錯誤，會執行的回撥函式 dataType: "json"//設定接受到的響應資料的格式 }); document.getElementById("Ai").style.display="none"; document.getElementById("Bi").style.display="block"; } </script> <script src="layui/layui.js" charset="utf-8"></script> <!-- 注意：如果你直接複製所有程式碼到本地，上述 JS 路徑需要改成你本地的 --> <script> layui.use('element', function(){ var $ = layui.jquery ,element = layui.element; //Tab的切換功能，切換事件監聽等，需要依賴element模組 //觸發事件 var active = { tabAdd: function(){ //新增一個Tab項 element.tabAdd('demo', { title: '新選項'+ (Math.random()*1000|0) //用於演示 ,content: '內容'+ (Math.random()*1000|0) ,id: new Date().getTime() //實際使用一般是規定好的id，這裡以時間戳模擬下 }) } ,tabDelete: function(othis){ //刪除指定Tab項 element.tabDelete('demo', '44'); //刪除：“商品管理” othis.addClass('layui-btn-disabled'); } ,tabChange: function(){ //切換到指定Tab項 element.tabChange('demo', '22'); //切換到：使用者管理 } }; $('.site-demo-active').on('click', function(){ var othis = $(this), type = othis.data('type'); active[type] ? active[type].call(this, othis) : ''; }); //Hash地址的定位 var layid = location.hash.replace(/^#test=/, ''); element.tabChange('test', layid); element.on('tab(test)', function(elem){ location.hash = 'test='+ $(this).attr('lay-id'); }); }); </script> </body> </html>