如何在php中使用foreach循环将数据从数据库检索到jquery-ui手风琴
Posted
技术标签:
【中文标题】如何在php中使用foreach循环将数据从数据库检索到jquery-ui手风琴【英文标题】：How to use foreach loop in php for retrieve data from data base to jquery-ui accordion 【发布时间】：2020-02-21 14:15:41 【问题描述】：如何在 php 中使用 foreach 循环将数据从数据库检索到 jQuery-ui 手风琴。我想使用 jQuery 手风琴从数据库中获取数据。我尝试了很多方法，但由于缺乏知识，我无法做到。我为此使用了 jQuery-ui。
这是我为此编写的代码
<body>
<div class="container" style="width:900px;">
<div id="accordion"></div>
</div>
</body>
</html>
<script>
$(document).ready(function()
$.ajax(
url: "fetch.php",
method:"POST",
dataType: "json",
success: function(data)
console.log(data);
$( function()
$( "#accordion" ).accordion();
//console.log(data);
var device_ID;
var sensor_ID;
);
);
);
</script>
这是 PHP 部分：
<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "kapra_iot");
$query = "
SELECT * FROM `view_sensor`
";
$result = mysqli_query($connect, $query);
//$output = array();
while($row = mysqli_fetch_array($result))
$sub_data["device_ID"] = $row["device_ID"];
$sub_data["device_Name"] = $row["device_Name"];
$sub_data["sensor_ID"] = $row["sensor_ID"];
$sub_data["sensor_Name"] = $row["sensor_Name"];
$sub_data["lower_Value"] = $row["lower_Value"];
$sub_data["mid_Value"] = $row["mid_Value"];
$sub_data["upper_Value"] = $row["upper_Value"];
$data[] = $sub_data;
foreach($data as $key => &$value)
$output[$value["device_ID"]] = &$value;
foreach($data as $key => &$value)
if($value["sensor_ID"] && isset($output[$value["sensor_ID"]]))
$output[$value["sensor_ID"]]["nodes"][] = &$value;
foreach($data as $key => &$value)
if($value["sensor_ID"] && isset($output[$value["sensor_ID"]]))
unset($data[$key]);
echo json_encode($data);
//echo '<pre>';
//print_r($data);
//echo '</pre>';
?>
【问题讨论】：
你的问题不清楚 只是我想知道如何将jquery-ui手风琴与mysql和php一起使用 api.jqueryui.com/accordion 这里有很多工作要做。当 GET 适用于您的脚本时，不确定为什么要使用 POST。请提供生成的 JSON 示例以供测试。 【参考方案1】：我会像 Kumar Praveen 一样将您指向文档。 Accordion 将使用 h3 标记和每个内部 div 标记的内部部分显示不同部分的标题。
循环遍历结果并按照前面描述的语法将其添加到您的手风琴 div。
$(document).ready(function ()
$.ajax(
url: "fetch.php",
method: "POST",
dataType: "json",
success: function (data)
for (device in data)
$("#accordion").append("<h3>"+device['device_id']+" " + device['device_Name'] + "</h3>");
$("#accordion").append("<div><p> Insert here all the relevant data of your device including all the other variables</p></div>");
$("#accordion").accordion();
);
);
【讨论】：
【参考方案2】：使用Widget Factory，您可以将手风琴扩展到远程源。
$(function()
var testData = [
"device_ID": 1001,
"device_Name": "Device 1",
"sensor_ID": 597,
"sensor_Name": "Sensor 1",
"lower_Value": 0,
"mid_Value": 50,
"upper_Value": 100
,
"device_ID": 1002,
"device_Name": "Device 2",
"sensor_ID": 598,
"sensor_Name": "Sensor 1",
"lower_Value": 0,
"mid_Value": 500,
"upper_Value": 1000
,
"device_ID": 1003,
"device_Name": "Device 3",
"sensor_ID": 599,
"sensor_Name": "Sensor 1",
"lower_Value": 0,
"mid_Value": 0.05,
"upper_Value": 0.1
];
$.widget("custom.buildList", $.ui.accordion,
options: $.extend(this.options,
source: "",
data: []
),
_create: function()
console.log("Init");
this.element.addClass("custom-list");
var action;
if (this.options.source == "")
action = "html";
else if (typeof this.options.source == "string")
action = "ajax";
else
action = "array";
console.log("Action", action);
if (action !== "html")
if (action === "ajax")
this.options.data = this._getData(this.options.source);
this._makeList(this.element);
console.log("Return to _create");
return this._super();
,
_getData: function(url)
console.log("Getting Data", url);
$.getJSON(url, function(resp)
this.options.data = resp;
);
,
_makeList: function(tObj)
console.log("Making List");
var myData;
if (this.options.data.length == 0)
myData = this.options.source;
else
myData = this.options.data;
console.log("List Data", myData);
$.each(myData, function(i, d)
var hd = $("<h3>").html(d.device_Name);
var bd = $("<div>");
var ls = $("<ul>").appendTo(bd);
$.each(d, function(k, v)
$("<li>").html(k + ": " + v).appendTo(ls);
);
tObj.append(hd, bd);
);
);
$("#accordion").buildList(
source: testData
);
);<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container" style="width:900px;">
<div id="accordion"></div>
</div>此扩展允许将 URL 或数组作为 Source 选项传入。因此，如果您想使用它从 PHP 脚本中获取数据，您可以这样做：
$("#accordion").buildList(
source: "fetch.php"
);
扩展的小部件将从 URL 或数组中收集数据并构建所需的 HTML，然后再调用小部件的其余部分。我不得不用一个数组进行测试。您还需要修改_makeList() 函数以满足您的各种需求。
如果您愿意，它也可以默认返回 HTML。此外，您拥有与使用标准 Accordion 小部件相同的所有选项。
【讨论】：
以上是关于如何在php中使用foreach循环将数据从数据库检索到jquery-ui手风琴的主要内容，如果未能解决你的问题，请参考以下文章
将数据从 javascript forEach 循环中的 php 数组发送到 ajax 调用的 url
使用 PHP for 和 foreach 循环从 JSON 数据中检索视频信息时遇到问题 - YouTube API 3
laravel：当计数达到给定值时如何从 foreach 循环中删除选定的数据