LayUI & JQuery(Ajax) & PHP 練習 ~ 09_01layui頁面布局(layout)+頁籤(選項卡/TABPAGE)+iframe

2023-12-12 jash.liao Comments 0 Comment

LayUI & JQuery(Ajax) & PHP 練習 ~ 09_01layui頁面布局(layout)+頁籤(選項卡/TABPAGE)+iframe

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

相關教學文件:

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>
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <!-- 头部区域 -->
                <ul class="layui-nav layui-layout-left">
                    <li class="layui-nav-item"><a href="">首頁</a></li>
                    <li class="layui-nav-item"><a href="">使用者中心</a></li>
                    <li class="layui-nav-item"><a href="">設置</a></li>
                </ul>
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item"><a href="">登出</a></li>
                </ul>
            </div>

            <div class="layui-side layui-bg-black">
            <!-- 左側區塊 -->
                <div class="layui-side-scroll">
                    <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        <li class="layui-nav-item layui-this"><a href="javascript:;">首頁</a></li>
                        <li class="layui-nav-item"><a href="javascript:;">選項卡一</a></li>
                        <li class="layui-nav-item"><a href="javascript:;">選項卡二</a></li>
                    </ul>
                </div>
            </div>

            <div class="layui-body">
                <!-- 中央區塊 -->
                <div class="layui-tab" lay-filter="demo">
                    <ul class="layui-tab-title">
                        <li class="layui-this">首頁</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <iframe src="https://www.example.com" style="width: 100%; height: 500px; border: none;"></iframe>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-footer">
            <!-- 底部 -->
            © 2023 著作權聲明
            </div>
        </div>
        
        <!-- 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;    
?>

發表迴響取消回覆