AJAX 调用时表格不会消失

Question

我正在尝试从 AJAX 到 PHP 调用成功删除后删除到此表。

下面是函数，

list.php

<script type="text/javascript">
    function massDelete()
    {
        if (!confirm("Are you sure"))
        {
            return false;
        }
        else
        {
            var selecedids = $("#selectedids").val();
            {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (xhttp.readyState == 4 && xhttp.status == 200) {
                        document.getElementById("success").innerHTML = xhttp.responseText;
                    }
                };
                xhttp.open("GET", "ajax_delete.php?massDelete=" + selectedids.value, true);
                xhttp.send();
            }
        }
        return false;
    }
</script>

上面的代码成功给了我选择的删除ID

在另一个文件上的这个 PHP 端

ajax_delete.php

<?php

if (!empty($_REQUEST['massDelete'])) {

    $selectId = $_REQUEST['massDelete'];
    $finalId = ltrim($selectId, ",");

    $sql = mysql_query("delete from contact_form where contactUser_id in ($finalId)", $con);
    if ($sql) {
        // echo '<script>';
        //echo 'var parent = document.getElementById("fullTable")';
        //echo 'element.remove(parent)';
        //echo '</script>';
        echo "sucess deleted";
    } else {
        echo "Please select a Contact to delete";
    }
}
?>

响应确实给了我成功的消息，但是我想在某个地方消失下面的 HTML 表格作为响应

list.php

<?php

echo '<table id="fullTable">';
echo "<tr><td> ";
echo '<input type="checkbox" name="checkAll" id="checkAll"/></td>';
echo '<td colspan="8" align="right">';
echo '<button type="submit" onClick="return massDelete()" name="delete" class="deleteall" id="deleted">Delete All</button></td>';
echo "</tr>
<tr>
<th></th>
<th>FIRST NAME</th>
<th>LAST NAME</th>
<th>EMAIL</th>
<th>PHONE</th>
<th>FAX</th>
<th></th>
<th></th>
<th></th>
</tr>";
while ($row = mysql_fetch_array($results)) {
    echo '<div id="checkboxlist">';
    echo '<tr class="show">';
    echo '<td><input name="checkbox[]" type="checkbox" class="checkbox1" value="' . $row['contactUser_id'] . '" id="Checkbox1"></td>';
    echo '<td>' . $row['first_name'] . '</td>';
    echo '<td>' . $row['last_name'] . '</td>';
    echo '<td>' . $row['email'] . '</td>';
    echo '<td>' . $row['phone'] . '</th>';
    echo '<td>' . $row['fax'] . '</td>';
    echo '<td><a href="addedit.php?id=' . $row['contactUser_id'] . '">Edit</a></td>';
    echo '<td><a class="delete" href="#" id="' . $row['contactUser_id'] . '">Delete</a></td>';
    echo '<td><a href="view.php?id=' . $row['contactUser_id'] . '" target="_blank">View</a></td>';
    echo '</div>';
}

} else {
    echo '<td colspan="9"><h1>No contacts found.</td></h1>';
}
?>

我很困惑我应该怎么做，如果删除一行而不是只有那一行消失，

但如果所有复选框都被选中删除，那么在成功时，整个表应该消失..

Answer 1

所以听起来 php 已成功删除它，因为当您刷新页面时会显示正确的数据。

但是，如果必须刷新页面才能正确显示，您需要确保返回正确的信息并正确解析它。只需console.log() 响应xhttp.responseText，看看是否返回了正确的数据，然后仔细检查您是否正确解析它（适当地更改 dom）。

Answer 2

您无需刷新页面即可显示其正确性。您需要使用 javascript 删除成功的行。以下是基础知识：

var deletedRow = $('#fullTable');
$.post('script.php', {data:data}, function(){
    if(data == "success"){
        deletedRow.remove(); //This will remove the row from the view
    }
});

Ajax 可以返回一个调用，并且你给出一个显示如果成功的语句，你必须让 javascript 实际删除它。是的，我们知道它已从数据库中删除，因此您可以成功地从页面中删除该视图。

更新 这是使用 jQuery，而不是纯 javascript。但这只是一个示例，表明您需要使用 javascript 删除元素，并且它不会消失，因为它不再在您的数据库中。

Answer 3

最后参考了这个remove any element using Jquery

我找到了解决办法，我也改了下面提到的AJAX功能代码，

函数 massDelete() {

     var element = $(this);
     var selecedids = $("#selectedids").val();
     var info = 'massDelete=' + selectedids.value;
     if(confirm("Are you sure you want to delete this?"))
     {
      $.ajax({
        type: "POST",
        url: "ajax_delete.php",
        data: info,
        success: function(){
      }
     });
     $this.parent("#fullTable").load("list.php");

      }
     return false;
     }

$this.parent("#fullTable").load("list.php"); 语句重新加载该表，因此仅反映数据库中存在的那些信息。