LayUI & JQuery(Ajax) & PHP 練習 ~ 08_02_PHP 產生 LAYUI 導航列表 AJAX [PHP 產出JSON JQuery(Ajax)解析JSON JQuery產生HTML]
LayUI & JQuery(Ajax) & PHP 練習 ~ 08_02_PHP 產生 LAYUI 導航列表 AJAX [PHP 產出JSON JQuery(Ajax)解析JSON JQuery產生HTML]
GITHUB: https://github.com/jash-git/layui-jquery-php-example/tree/main/08_02
相關教學文件: ChatGPT
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" lay-filter="nav-demo" id="layui-nav-top"></ul>
<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模塊
})
$.ajax({
url: 'layui-nav-top.php', // 替換為你的 PHP 文件的路徑
type: 'GET',
dataType: 'json',
success: function(data){
// 將返回的數據動態生成導航列表
var navContainer = $('#layui-nav-top');
for(var i = 0; i < data.length; i++){
navContainer.append('<li class="layui-nav-item"><a href="#">'+data[i].name+'</a></li>');
}
// 更新 LAYUI
layui.nav('nav-demo');
}
});
});
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>
layui-nav-top.php
<?php
// 這是一個簡單的例子，你需要根據你的需求修改
// 假設你有一個數據陣列
$data = array(
array('id' => 1, 'name' => '項目1'),
array('id' => 2, 'name' => '項目2'),
// 添加更多項目...
);
// 將數據轉換為 JSON 格式
echo json_encode($data);
?>
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;
?>