我是网页设计新手。一起学习 PHP 和 HTML。 我正在尝试根据 SQL 结果动态显示图标数。 我有一个 PHP 代码来查询数据库并获取结果。我有 HTML 代码，它只显示我指定的数字(静态)。我想我几乎接近实现它，但发现很难整合。我应该为此使用 AJAX 吗？我该怎么做？
index.php
<?php
$dbuser="root";
$dbname="test";
$dbpass="root";
$dbserver="localhost";
// Make a MySQL Connection
$con = mysql_connect($dbserver, $dbuser, $dbpass) or die(mysql_error());
mysql_select_db($dbname) or die(mysql_error());
// Create a Query
$sql_query = "SELECT ID, UserName, Status FROM table";
// Execute query
$result = mysql_query($sql_query) or die(mysql_error());
$jsonArray = array();
while ($row = mysql_fetch_array($result)){
$jsonArrayItem = array();
$jsonArrayItem["ID"] = $row["ID"];
$jsonArrayItem["UserName"] = $row["UserName"];
$jsonArrayItem["Status"] = $row["Status"];
array_push($jsonArray, $jsonArrayItem);
//echo '<option value='. $row['id'] . '>'. $row['login'] . '</option>';
}
mysql_close($con);
$tableData = array(
"data" => $jsonArray
);
header('Content-Type: application/json');
echo json_encode($tableData,JSON_UNESCAPED_SLASHES);
die();
?>
test.html
<html>
<head>
<title>EXAMPLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript">
// AJAX uery.Call PHP and retrieve the result .Based on the number of rows, display the below elements
</script>
<div id="container">
<a href="#">
<figure>
<button title="User1" class=" fa fa-user" style="font-size:100px;color:**green**"></button>
<figcaption>User1</figcaption>
</figure>
</a>
<a href="#">
<figure>
<button title="User2" class="fa fa-user" style="font-size:100px;color:**red**"></button>
<figcaption>User2</figcaption>
</figure>
</a>
</div>
</body>
</html>
<style>
#container {
text-align: center;
}
a, figure {
display: inline-block;
}
figcaption {
margin: 10px 0 0 0;
font-variant: small-caps;
font-family: Arial;
font-weight: bold;
color: #bb3333;
}
figure {
padding: 5px;
}
img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
}
</style>
如果状态为是，则图标应为绿色。如果否，则为红色。你能帮我整合并实现这一目标吗？
最佳答案
您在这里甚至可能不需要 AJAX。您可以只获取数据库查询的结果，并通过 foreach 循环遍历 index.php 中的数组。
使用 AJAX 的要点是让我们在 index.html 中说一个表单，并为数据库提供新条目并在 index.html 中获取新信息而无需重新加载页面，我在你的情况下没有看到。或者在不按某些时间间隔重新加载页面的情况下向 index.html 提供新数据。如果是这种情况，您可以使用 jQuery.ajax() 方法。这个方法可以被一些事件调用——按钮点击或时间间隔。你可以这样调用:
$.get("index.php", function(result){
var resultArray = jQuery.parseJSON(result);
});
然后您应该使用 resultArray 迭代并生成 .
关于javascript - 如何根据结果中的行数显示图标/图像的数量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39419119/