javascript - 如何在没有刷新的情况下通知数据已更改？

我写了这段代码：

$('.actionButton').click(function(){
            var buttonValue = $(this).val();
            var userId = '<?php echo $_SESSION['id']; ?>';
            console.log(userId);
            $.ajax({
                type: 'POST',
                url: 'ajax.php',
                data: {
                    'action': buttonValue,
                    'id' : userId
                },
                dataType: 'json',
                success: [ location.reload()]
            });
        });

使用这些按钮：

<?php
                if(!isset($_GET['messages']) || $_GET['messages'] == 'inbox')
                    echo '<div class="card-header">
                    Messages<button class="btn btn-sm btn-success pull-right actionButton" title="Mark all as read" value="readAll"><i class="fa fa-envelope-open"></i></button>
                    <button class="btn btn-sm btn-default pull-right actionButton" id="buttonAlignment" value="unreadAll" title="Mark all as unread"><i class="fa fa-envelope"></i></button>
                </div>';
                else{
                    echo '<div class="card-header">
                    Messages<button class="btn btn-sm btn-danger pull-right actionButton" value="removeAll" title="Remove all"><i class="fa fa-trash"></i></button>
                </div>';
                }
                ?>

这个要在Ajax调用上执行的PHP脚本：

require_once '../includes/includeDatabase.php';

if(isset($_POST['action'])){
    $id = $_POST['id'];
    switch($_POST['action']){
        case 'removeAll':
            removeAll($database, $id);
            break;
        case 'readAll':
            readAll($database, $id);
            break;
        case 'unreadAll':
            unreadAll($database, $id);
            break;
        default:
            break;
    }
}

function removeAll($db, $id){
    /* @var $db Database */
    $db->executeQuery('portal', "DELETE FROM messages WHERE userId = $id AND messageDeleted = 1");
}
function readAll($db, $id){
    /* @var $db Database */
    $db->executeQuery('portal', "UPDATE messages SET messageRead = 1 WHERE userId = '$id'");
}
function unreadAll($db, $id){
    /* @var $db Database */
    $db->executeQuery('portal', "UPDATE messages SET messageRead = 0 WHERE userId = '$id'");
}

我知道我应该将$ id绑定到查询以避免SQL注入，然后再有人对此抱怨。现在这不是问题。

我的问题：这段代码可以正常运行，但是在单击“全部删除”按钮或“全部读取”或“全部未读取”时非常有用。我的页面刷新了，我知道发生这种情况是因为我告诉ajax执行location.reload()，但是如果我不这样做，我的表将不知道数据已更改。

如何做到这一点，以便当我单击按钮时，我的页面会知道数据已更改？

最佳答案

诚然，这不是最好的方法，但是一个简单的解决方案是仅回显您对php文件所做的任何操作，如下所示：

if(isset($_POST['action'])){
    $id = $_POST['id'];
    switch($_POST['action']){
        case 'removeAll':
            removeAll($database, $id);
            break;
        case 'readAll':
            readAll($database, $id);
            break;
        case 'unreadAll':
            unreadAll($database, $id);
            break;
        default:
            break;
    }
    die($_POST['action']);
}

现在，您的ajax调用者可以像这样进行接听：

      $.ajax({
            type: 'POST',
            url: 'ajax.php',
            data: {
                'action': buttonValue,
                'id' : userId
            },
            dataType: 'json',
            success: function (response)
            {
                if(response =='removeAll')
                {
                    //remove all remove the table by emptying the div or something
                }
                elseif(response =='readAll')
                {
                    //perform read all action
                }
                esleif(response =='unreadAll')
                {
                    //perform unreadall action
                }

            }
        });

要更新表，我建议使用jquery的datatable插件，该插件可让您添加/删除行等等。

关于javascript - 如何在没有刷新的情况下通知数据已更改？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45670316/