如何实时更新用ajax添加的新行

时间:2019-06-16 22:05:53

标签: javascript php jquery html ajax

我需要显示新的更新表 我使用jquery ajax来获取数据并添加新行,但不为所有用户显示 我可以使用setInterval,但我不想使用它

image table add

var form=$("#formgame");
        $("#btnnewgame").click(function(){
            $.ajax({
                type:"POST",
                url:form.attr("action"),
                data:$("#formgame input").serialize(),//only input
                success: function(response){
                    $("#tr1").prepend($("<tr>").load("include/newgame.php"));
                    $("#showgame").fadeOut(function(){
                      $("#showgame").fadeIn().html(response);
                        flipStep(0, 20);
                    });
                }
            });
        });

使用SetInterval但不好用

$(document).ready(function () {
        setInterval(function() {
            $('#tr1').load("include/newgame.php")
        },1000);
    });

用于显示最后添加行的php代码

include_once("config.php");

//var_dump($data);
$connection = config();
$sql = "SELECT user.username,game.title,game.amount,game.hort1 FROM user INNER JOIN game ON user.id=game.user1 WHERE game.active = '1' ORDER BY game.id DESC LIMIT 1";
$row = mysqli_query($connection, $sql);
while($data = mysqli_fetch_assoc($row))
{
    echo "<td class=\"text-nowrap\"><i class=\"material-icons  ml-1 mr-1\">videogame_asset</i>$data[title]</td>";
    echo "<td class=\"text-nowrap\">$data[amount]<i class=\"material-icons  ml-1 mr-1\" >attach_money</i></td>";
    if ($data[hort1]== 1){
        echo "<td class=\"text-nowrap\">$data[username]<i class=\"material-icons  ml-1 mr-1\">swap_horiz</i>1</td>";
    }else{
        echo "<td class=\"text-nowrap\">$data[username]<i class=\"material-icons  ml-1 mr-1\">swap_horiz</i>2</td>";
    }
    echo "<td class=\"text-nowrap\"><button class=\"btn btn-success  ml-1 mr-1\" name=\"btn_enter\">enter the game</button> </td>";
}

0 个答案:

没有答案