LayUI & JQuery(Ajax) & PHP 練習 ~ 04_前端(JQuery Ajax)使用GET方式呼叫後端(PHP)產生log檔案和對應JSON字串並透過前端(JS)語法還原成對應物件最後使用’layer’的’msg’將數據顯示在畫面上

2023-12-06 jash.liao Comments 0 Comment

LayUI & JQuery(Ajax) & PHP 練習 ~ 04_前端(JQuery Ajax)使用GET方式呼叫後端(PHP)產生log檔案和對應JSON字串並透過前端(JS)語法還原成對應物件最後使用’layer’的’msg’將數據顯示在畫面上

GITHUB: https://github.com/jash-git/layui-jquery-php-example/tree/main/04
相關教學文件
教學影片/01.mp4 有對應layer引入教學
教學PDF/01.pdf 有對應layer引入教學

index.html

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="layui/css/layui.css"><!-- layui css 文件 -->
    </head>
    
    <body>
        
        <!-- 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;    
?>

發表迴響取消回覆