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

Question

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

添加用户.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';
        }
    }   
?>

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

Answer 1

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

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

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

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

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