LayUI & JQuery(Ajax) & PHP 練習 ~ 08_layui導航列(工具列/功能表)

LayUI & JQuery(Ajax) & PHP 練習 ~ 08_layui導航列(工具列/功能表)

LayUI & JQuery(Ajax) & PHP 練習 ~ 08_layui導航列(工具列/功能表)


GITHUB: https://github.com/jash-git/layui-jquery-php-example/tree/main/08


相關教學文件:
    教學影片/05.mp4
    教學PDF/08.pdf


index.html

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="layui/css/layui.css"><!-- layui css 文件 -->
        <style><!-- class css 高度設定-->
        body {
            margin: 20px;
        }
        </style>      
    </head>
    
    <body> <!-- layui導航列(工具列/功能表) -->
		<ul class="layui-nav">
			<li class="layui-nav-item"><a href="#"><i class="layui-icon layui-icon-user"></i> 仪表图</a></li>
			<li class="layui-nav-item"><a href="#" class="layui-this">列表</a></li>
			<li class="layui-nav-item"><a href="#">图文</a></li>
			<li class="layui-nav-item">
				<a href="javascript:;">项目方案</a>
				<dl class="layui-nav-child">
					<dd><a href="#">驱动式</a></dd>
					<dd><a href="#">扁平式</a></dd>
					<dd><a href="#">龙虎式</a></dd>
				</dl>
			</li>
		</ul>

		<br><br>

		<ul class="layui-nav layui-bg-blue">
			<li class="layui-nav-item"><a href="#"><i class="layui-icon layui-icon-user"></i> 仪表图</a></li>
			<li class="layui-nav-item"><a href="#" class="layui-this">列表</a></li>
			<li class="layui-nav-item"><a href="#">图文</a></li>
			<li class="layui-nav-item">
				<a href="javascript:;">项目方案</a>
				<dl class="layui-nav-child">
					<dd><a href="#">驱动式</a></dd>
					<dd><a href="#">扁平式</a></dd>
					<dd><a href="#">龙虎式</a></dd>
				</dl>
			</li>
		</ul>

		<br><br>

		<span class="layui-breadcrumb" lay-separator="-">
			<a href="#">首页</a>
			<a href="#">课程列表</a>
			<a href="#">前端</a>
			<a><cite>Layui</cite></a>
		</span>

		<br><br>

		<ul class="layui-nav layui-nav-tree" lay-shrink="all">
			<li class="layui-nav-item" lay-unselect><a href="#"><i class="layui-icon layui-icon-user"></i> 仪表图</a></li>
			<li class="layui-nav-item" lay-unselect><a href="#">列表</a></li>
			<li class="layui-nav-item" lay-unselect><a href="#">图文</a></li>
			<li class="layui-nav-item layui-nav-itemed">
				<a href="javascript:;">项目方案</a>
				<dl class="layui-nav-child">
					<dd><a href="#">驱动式</a></dd>
					<dd><a href="#">扁平式</a></dd>
					<dd><a href="#">龙虎式</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item">
				<a href="javascript:;">项目方案</a>
				<dl class="layui-nav-child">
					<dd><a href="#">驱动式</a></dd>
					<dd><a href="#">扁平式</a></dd>
					<dd><a href="#">龙虎式</a></dd>
				</dl>
			</li>
		</ul>
        
        <!-- body 末尾放置所有JS -->
        <script src="./js/jquery-3.7.1.js"></script>
        <script src="layui/layui.js"></script>    
        <script>
            $(document).ready(function () {
                CallAPI();
				layui.use(['element'], () => {//layui導航列(工具列/功能表) 所需要的JS模塊
				
				})				
            });    
                        
            function CallAPI() {
                $.ajax({            
                  url: './index_api.php',
                  type: 'Get',                          
                      beforeSend: function(){
                  },
                  
                  success: function(data) {
                    var StrMsg='';
                    for (var i = 0; i < data.length; i++) {
                       StrMsg+=data[i].state + ' - ' + data[i].times+'\n';
                       console.log(data[i].state + ' - ' + data[i].times);
                    }
                    
                    // JS彈出視窗顯示資料- alert(StrMsg);
                    //https://www.layuiweb.com/doc/index.htm ~ layer msg 顯示資料,藉此判斷可以使用layer
                    layui.use(['layer', 'form'], function(){
                      var layer = layui.layer
                      ,form = layui.form;
                      
                      layer.msg(StrMsg);
                    });
                    
                  },
                  
                  error: function() {
                  },
                  
                  complete: function() {

                  }              
                });              
            }            
          
        </script>
    </body>
</html>


index_api.php

<?php
    date_default_timezone_set("Asia/Taipei");
    header('Content-Type: application/json; charset=utf-8');
    
    $myfile = fopen("log.txt", "a");
    $txt = date("Y-m-d H:i:s");
    fwrite($myfile, $txt."\n");
    
    $data = array();
    $objectBuf01 = new stdClass();
    $objectBuf01->state = "success";
    $objectBuf01->times = $txt;
    $data[] = $objectBuf01;

    // Encode the array to JSON
    $Strjson = json_encode($data);
    echo $Strjson;    
?>

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *