LayUI & JQuery(Ajax) & PHP 練習 ~ 05_layui布局和網格系统

2023-12-06 jash.liao Comments 0 Comment

LayUI & JQuery(Ajax) & PHP 練習 ~ 05_layui布局和網格系统

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

相關教學資料:
教學影片/02.mp4
教學PDF/02.pdf

index.html

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="layui/css/layui.css"><!-- layui css 文件 -->
        <style><!-- class css 高度設定-->
            .a {
                height: 50px;
            }
        </style>      
    </head>
    
    <body> <!-- 布局和網格系统 -->

        <div class="layui-container">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-sm4">
                    <div class="layui-bg-orange a">1</div>
                </div>
                <div class="layui-col-sm4 layui-col-sm-offset4">
                    <div class="layui-bg-blue a">2</div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-bg-green a">3</div>
                </div>
            </div>
        </div>
        
        <br>

        <div class="layui-fluid">
            <div class="layui-row">
                <div class="layui-col-sm4 layui-bg-orange">1</div>
                <div class="layui-col-sm4 layui-bg-blue">2</div>
                <div class="layui-col-sm4 layui-bg-green">3</div>
            </div>
        </div>
        
        <!-- body 末尾放置所有JS -->
        <script src="./js/jquery-3.7.1.js"></script>
        <script src="layui/layui.js"></script>    
        <script>        
            $.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;    
?>

發表迴響取消回覆