jquery - 如何使用jquery ajax实时更新div内容

问题描述

所以我正在处理我的项目，我想做的是实时从我的数据库中获取并使用 j-query ajax 在我的 div 中实时显示（这是 3 个垃圾箱）有人可以帮我吗

我已经使用纯 ajax 完成了，我想使用 j-query 应用它，请有人帮我解决这个问题

function binload() {

    var ajax = new XMLHttpRequest();
    ajax.open("GET", "tank.php", true);
    ajax.onload = function(){
            document.getElementById("water1").style.height = ajax.responseText;
            document.getElementById("water2").style.height = ajax.responseText;
            document.getElementById("water3").style.height = ajax.responseText;   
    }
    ajax.send();
    
    ajax.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var data = JSON.parse(this.responseText);
            console.log(data);
            
            var html = "";
            for(var a = 0; a < data.length; a++) {
                var ID = data[a].ID;
                var Bio = data[a].Bio;
                var Non_Bio = data[a].Non_Bio;
                var Recy = data[a].Recy;
                var Extra = data[a].Extra;

               
            }
            document.getElementById("data").innerHTML += html; 

            var obtained = Bio;  
            var obtained2 = Non_Bio;
            var obtained3 = Recy;
            var div = 5000;

            var obt = obtained*100/div;
            var obt2 = obtained2*100/div;
            var obt3 = obtained3*100/div;

            console.log(obt);
            console.log(obt2);
            console.log(obt3);

            document.getElementById("water1").style.height = obt + "%";
            document.getElementById("water2").style.height = obt2 + "%";
            document.getElementById("water3").style.height = obt3 + "%";
        
        }       
    };
}

.tank {
    width: 150px;
    height: 300px;
    border: 2px solid black;
    background: white;
    position: relative;
    
    display: inline-block;
    margin: 10px;
}

.tank .water {
    position: absolute;
    background: blue;
    width: 100%;
    bottom: 0;
}

<body onload="binload()">

<div class="tank">
    <div class="water" id="water1" ></div>
</div>

<div class="tank">
    <div class="water" id="water2"></div>
</div>

<div class="tank">
    <div class="water" id="water3"></div>
</div>

这是我的php代码

<?php
$conn = mysqli_connect("localhost", "root", "", "trashbin");
$result = mysqli_query($conn, "SELECT * FROM trash");

$data = array();
while ($row = mysqli_fetch_object($result))
{
    array_push($data, $row);
}

echo json_encode($data);
exit();

有人可以帮我解决这个问题，非常感谢:)

标签： jqueryajax

jquery - 如何使用jquery ajax实时更新div内容

问题描述

解决方案

推荐阅读