自动更新 table 没有 refreshing/reloading 的页面

Question

我想问一下，如何在不重新加载或刷新的情况下获取 table 中显示的最新数据更新。数据的插入已经很好，它已经插入但是我看到页面仍在重新加载。我对 ajax 和使用 client-side.

的 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 的代码。

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';
        }
    }   
?>

有没有一种方法可以不附加 table 数据，而只附加整个文件？我无法附加按钮，只能附加 table 数据。

Answer 1

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

我将不得不对您的页面布局方式做出假设。假设它是 table 和 class "mytable".

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

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

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

自动更新 table 没有 refreshing/reloading 的页面

automatically updates the table without refreshing/reloading the page

ajax

jquery

sweetalert2