Question

我是网页设计的新手。学习PHP＆amp; HTML在一起。我正在尝试根据SQL结果动态显示图标数量。我有一个PHP代码来查询DB并获取结果。我有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>

如果状态为是，则图标应为绿色。如果没有，红色。你能帮我整合一下吗？

Answer 1

你可能在这里甚至不需要AJAX。您可以通过foreach循环获取数据库查询的结果并在index.php中迭代数组。

使用AJAX的目的是让我们在index.html中说一个表单，并为数据库提供新条目并在index.html中获取新信息而不重新加载页面，我在这种情况下没有看到。或者使用新数据提供index.html，而无需在某些时间间隔内重新加载页面。如果是这种情况，您可以使用jQuery.ajax（）方法。可以通过某些事件调用此方法 - 按钮单击或时间间隔。你可以这样打电话：

$.get("index.php", function(result){
    var resultArray = jQuery.parseJSON(result);
});

然后你应该使用resultArray迭代并生成每个用户。

如何根据结果中的行数显示图标/图像的数量？

1 个答案: