如何通知数据没有刷新?

I wrote this code:

$('.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()]
            });
        });

With these buttons:

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

And this PHP script to execute on Ajax call:

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'");
}

I know I should bind the $id to query to avoid SQL injection before anyone starts complaining about that. That's not the question for now.

My question: This code is fully functioning but it's very anyoning that when I click the remove all button or read All or unread All. That my page refreshes, I know this happens because I tell ajax to do location.reload() but if I don't do this my table won't know the data has changed.

How can I make it so that when I click the button my page will know that the data is changed?

Admittedly not the best way to do this, but a simple solution would be to just echo whatever action you did on the php file like this:

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']);
}

Now your ajax caller can pickup on this like so:

      $.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
                }

            }
        });

To update the table, I woudl suggest using datatable plugin for jquery that allows you to add/remove rows and much more.

I would suggest following thing:

First of all you need to make sure all you sql query runs correctly without any problem and would be good idea to check with if statement, if it went correctly and return true and false message to ajax request. Once your ajax request is successful and php file return true message you can use, jQuery hide or remove function to remove selected message. This way you do not have to reload the page. Let me know if anything is not clear. I hope this will help you out.