Question

我写了这段代码：

$('.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()但是如果我不这样做，我的桌子就不知道数据已经改变了。

我怎样才能这样做，当我点击按钮时，我的页面会知道数据已被更改？

Answer 1

不可否认不是最好的方法，但一个简单的解决方案就是回应你在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插件，允许您添加/删除行等等。

Answer 2

我建议遵循以下内容：

首先，您需要确保所有sql查询正确运行而没有任何问题，并且最好检查if语句，如果它正确并返回true和false消息给ajax请求。一旦你的ajax请求成功并且php文件返回true消息就可以使用，jQuery隐藏或删除功能来删除所选消息。这样您就不必重新加载页面了。如果有什么不清楚，请告诉我。我希望这会帮助你。

如何通知数据已更改而无需刷新？

2 个答案: