自动更新表格而不刷新/重新加载页面

如何解决自动更新表格而不刷新/重新加载页面

我想问一下，如何在不重新加载或刷新数据的情况下获取显示在我的表中的数据的最新更新。数据的插入已经很好了，它已经插入了，但是我看到页面仍在重新加载。我对使用客户端的 ajax 和 sweetalert 还是个新手。

addingUser.js

$(document).ready(function(){
    $('#addStudent').click(function(e){
        e.preventDefault();
        Swal.fire({
            title: "Are you sure?",text: "New student will be added added!",icon: "success",showCancelButton: true,allowEscapeKey : false,allowOutsideClick: false
        }).then((result) => {
            if (result.isConfirmed) {
                var valid = this.form.checkValidity();
                if(valid){
                    var studentNumberId = $('#studentNumberId').val();
                    var studentFullName = $('#studentFullName').val();
                    var studentPassword = $('#studentPassword').val();
                    var studentEmail = $('#studentEmail').val();
                    var studentYearBlock = $('#studentYearBlock').val();
                        e.preventDefault()
                        $.ajax({
                            type: 'POST',url: 'includes/model_addStudent.PHP',data: {studentNumberId: studentNumberId,studentFullName: studentFullName,studentPassword: studentPassword,studentEmail: studentEmail,studentYearBlock: studentYearBlock},success: function(data){
                                Swal.fire({
                                    title: "Successfully Added!",text: "New student has been added!",icon: "success"
                                }).then(function() {
                                    // how to append the buttons here? it doesn't append or how do I append the entire page so that there will be a button after inserting a data in the table (see the image provided below)
                                    <tr>
                                       <td>${studentNumberId}</td>
                                       <td>${studentFullName}</td>
                                       <td>${studentEmail}</td>
                                       <td>${studentYearBlock}</td>
                                       </tr>
                                });
                            },error: function(xhr,thrownError,ajaxOptions){
                                Swal.fire({
                                    title: "Successfully Added!",text: thrownError,icon: "info"
                                })
                            } 
                        });
                }
                else {
                    Swal.fire({
                        title: "Error!",text: "Invalid Form",icon: "warning"
                    });
                }
            }
            else {
                Swal.fire(
                'No Changes!','No New Student has been added.','info'
                )
            }
        });   
            });      
    });

这是我的表的代码。

table.PHP

<?PHP
include 'includes/connection_operation.PHP';
$sql = "SELECT * FROM tbl_students";
$query = MysqLi_query($conn,$sql);

    if($query)
    {
        while($row = MysqLi_fetch_assoc($query))
        {
            ?>
    <td><?PHP echo $row['student_id']; ?></td>
    <td><?PHP echo $row['student_name']; ?></td>
    <td><?PHP echo $row['student_email']; ?></td>
    <td><?PHP echo $row['student_yrblock']; ?></td>

    <td>
        <input type="submit" name="viewStudents" id="viewStudents" value="View" class="btn btn-info" 
        data-toggle="modal" data-target="#viewExistingStudents<?PHP echo $row["ID"];?>">
        <input type="submit" name="deleteRecord" id="deleteRecord" value="Delete" class="btn btn-danger" 
        data-toggle="modal" data-target="#deleteSelectedStudent<?PHP echo $row["ID"];?>">
    </td>
    </tr>
    <?PHP 
    include './helper/helper_viewExistingStudents.PHP';
    include './helper/helper_deleteSelectedStudent.PHP';
        }
    }   
?>

有没有一种方法，而不是附加表数据，而是附加整个文件？我不能附加按钮，只能附加表格数据。

解决方法

您只需要将其添加到页面中，实际上就这么简单。像这样的东西（因为你使用的是 jquery）应该让你开始：

我将不得不对您的页面布局方式做出假设。假设它是一个类为“mytable”的表。

在您的 success: function(data){ 部分内部：

$('.mytable').append(`
    <tr>
        <td>${studentNumberId}</td>
        <td>${studentFullName}</td>
        <td>${studentEmail}</td>
        <td>${studentYearBlock}</td>
    </tr>
`);

这应该会让你开始理解这个概念。