Javascript 如何在删除单行后使用ajax重新加载表_Javascript_Php_Ajax_Database

Javascript 如何在删除单行后使用ajax重新加载表

javascript php ajax database

Javascript 如何在删除单行后使用ajax重新加载表,javascript,php,ajax,database,Javascript,Php,Ajax,Database,我正在使用数据库中的随机值进行分页。现在，我的分页已经完成，我正在研究如何删除一行，并且在不刷新浏览器的情况下，当您单击X按钮时，我需要一个confirm（），如果它仍然存在，则该行必须消失，但我的表应该仍然存在这是我的剧本： <?php include_once("connectDB.php"); $db = new Connect; $db = $db->ConnectDB(); $st = $db->prepare("SELECT COUNT(id) FROM use

我正在使用数据库中的随机值进行分页。现在，我的分页已经完成，我正在研究如何删除一行，并且在不刷新浏览器的情况下，当您单击X按钮时，我需要一个confirm（），如果它仍然存在，则该行必须消失，但我的表应该仍然存在

这是我的剧本：

<?php 
include_once("connectDB.php");
$db = new Connect;
$db = $db->ConnectDB();
$st = $db->prepare("SELECT COUNT(id) FROM users WHERE type='Concessionnaire'");
$st->execute();
$res = $st->fetch(PDO::FETCH_NUM);
$total_rows = $res[0];
$rpp = 5;
$last = ceil($total_rows/$rpp);
if ($last < 1) {
    $last = 1;
}
?>
<!DOCTYPE html>
<html>
    <head>
        <style>
            table,td {
                padding:5px;
                border:1px solid black;
            }
            table {
                width:800px;
            }
            #pagination_controls {
                width:200px;
                float:right;
                padding-bottom:15px;
            }
            #container {
                width:850px;
                margin:auto;
            }
        </style>    
        <script>
            function request_page(pn) {
                var rpp = <?php echo $rpp; ?>;
                var last = <?php echo $last; ?>;
                var results_box = document.getElementById("results_box");
                var pagination_controls = document.getElementById("pagination_controls");
                results_box.innerHTML = "Processing...";

                var hr = new XMLHttpRequest();
                hr.open("POST","pagination_parser.php",true)
                hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                hr.onreadystatechange = function () {
                    if(hr.readyState == 4 && hr.status == 200) {
                        var dataArray = hr.responseText.split("||");
                        var html_output = "<table><tr><th></th><th>ID</th><th>username</th><th>password</th><th>e-mail</th><th>creer par:</th><th></th></tr>";
                        for(i=0;i<dataArray.length - 1;i++) {
                            var itemArray = dataArray[i].split("|");
                            html_output += "<tr><td><input type='submit' onclick=''; value='O'></td><td>"+itemArray[0]+"</td><td>"+itemArray[1]+"</td><td>"+itemArray[2]+"</td><td>"+itemArray[3]+"</td><td>"+itemArray[4]+"</td><td><input type='submit' onclick='javascript:supprimer("+itemArray[0]+");'; value='X'></td></tr>";
                        }
                        results_box.innerHTML = html_output;
                    }
                }
                hr.send("rpp="+rpp+"&last="+last+"&pn="+pn);

                var paginationCtrls = "";
                if(last != 1) {
                    if(pn > 1) {
                        paginationCtrls += '<button onclick="request_page('+(pn-1)+')">&lt;</button>';
                    }
                    paginationCtrls += '&nbsp; &nbsp; <b> Page '+pn+' of '+last+' &nbsp; &nbsp; ';
                    if(pn != last) {
                        paginationCtrls += '<button onclick="request_page('+(pn+1)+')">&gt;</button>';
                    }
                }
                pagination_controls.innerHTML = paginationCtrls;
            }
            function supprimer(id) {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if(xhr.readyState == 4 && xhr.status == 200) {
                        if(confirm("Etes-vous sur?")) {
                            document.getElementById('container').innerHTML = xhr.responseText;
                        }
                    }
                }
                xhr.open("GET","supprimer2.php?id="+id,true);
                xhr.send();
            }
        </script>
    </head>
    <body>
        <div id="container">
            <div id="pagination_controls"></div>
            <div id="results_box"></div>
        </div>
        <script>request_page(1);</script>

    </body>
</html>

这就是我被卡住的地方：

<?php 
$id = $_GET['id'];
include_once('connect.php');
$obj = new User;
$obj->supprimer($id);
echo 'TABLE HERE';
?>

如您所见，在ajax的帮助下，我可以对我的容器div id进行innerHTML；所以我在supplier2.php中尝试了echo的请求页面（1），但它不起作用。空白页。告诉我，伙计们，我怎样才能把我的表放回去？？？

定义一个全局变量，比如

var page = 1;

并在您的

请求页面中

函数将其设置为：

function request_page(pn) {
    .....
    page = pn;
    .....
}

在ajax结果之后的

supplimer

函数调用

request\u页面

函数中

function supprimer(id) {
    ...........
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            if(confirm("Etes-vous sur?")) {
                document.getElementById('container').innerHTML = xhr.responseText;
                request_page(page); // Call to refresh table
            }
        }
    }
    xhr.open("GET","supprimer2.php?id="+id,true);
    xhr.send();
}

未捕获类型错误：无法设置null的属性“innerHTML”。您没有id为

容器的元素。检查你的dom，没有这样的元素尼斯！我得到了它。在我的supplier2.php中，我放置了echo“”；因为我觉得我的页面一片空白。比如，不再有div了。
function supprimer(id) {
    ...........
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            if(confirm("Etes-vous sur?")) {
                document.getElementById('container').innerHTML = xhr.responseText;
                request_page(page); // Call to refresh table
            }
        }
    }
    xhr.open("GET","supprimer2.php?id="+id,true);
    xhr.send();
}