json-php-mysql-jquery-ajax如何更新而不刷新

Question

我有以下示例。

---

userview.php

<script>
        $(document).on("ready", function(){
            loadData();
        }); 

        var loadData = function(){
            $.ajax({
                type:"POST",
                url:"Users.php"
            }).done(function(data){
                console.log(data);
                var users = JSON.parse(data);
                for(var i in users){
                    $("#content").append(users[ i ].usuario + " " + users[ i ].nombres + "<br>");
                }
            });
        }

    </script>

users.php

  <?php
    $bd = "test";
    $server ="localhost";
    $user = "root";
    $password = "";

    $conexion = @mysqli_connect($server, $user, $password, $bd);

    if( ! $conexion )   die( "Error de conexion ".mysqli_connect_error() );

    $sql = "SELECT usuario, nombres FROM usuario";
    $result = mysqli_query($conexion, $sql);
    $array_user = array();
    while($data = mysqli_fetch_assoc($result)){
        $array_user[] = $data;
    }

    echo json_encode($array_user);
?>

我如何在不刷新页面的情况下在userview.php中重新加载用户（如果进行更新或删除）

Answer 1

一个解决方案是使loadData()每5秒运行一次，即：

<script>
$(document).ready(function() {
    startLoop();
});

var frequency = 5000; // 5 seconds in miliseconds
var interval = 0;
// STARTS and Resets the loop
function startLoop() {
    if (interval > 0) clearInterval(interval); // stop
    interval = setInterval("loadData()", frequency); // run
}

function loadData() {
    $.ajax({
        type: "POST",
        url: "Users.php"
    }).done(function(data) {
        console.log(data);
        var users = JSON.parse(data);
        $("#content").empty();
        for (var i in users) {
            $("#content").append(users[i].usuario + " " + users[i].nombres + "<br>");
        }
    });
}
</script>