如何通过 AJAX 运行 SQL 选择查询（实时结果）

Question

我试图在使用 SQL 更新功能后显示更新的 SQL 记录。我怎样才能使用 AJAX 来实现这一点。在 JavaScript 文件中，我有通过 AJAX 工作的 SQL 更新功能。成功执行更新函数后，将调用异步函数。我相信 data 属性设置不正确。启动此功能后，在页面刷新之前看不到任何更新。我正在尝试获取实时 SQL 选择输出。

HTML:（包含php文件：prevoznik.php）

<div class="row pt-5">
        <div class="col-12 ff-nu fs-16 fw-600">Izgled za prevoznika
            <div class="row pt-3" id="prevoznik">
                <div class="col-12 list-widget">
                    <div class="row divider-heading uppercase py-3">
                        <div class="col-1 fs-09 fw-600">id</div>
                        <div class="col-3 flex-vcenter-items fw-600 fs-09">naslov</div>
                        <div class="col-1 flex-vcenter-items fw-600 fs-09">ura</div>
                    </div>
                    <?php require 'includes/prevoznik.php'; ?>
                </div>
            </div>
        </div>
    </div>
</div>

PHP (prevoznik.php)

$sql3 = "
SELECT id, potnik_id, ura, naslov
FROM prevoznik 
ORDER BY HOUR(ura), MINUTE(ura) ASC;
";
$result = $conn->query($sql3);
$potnik = $row["potnik"];
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {

        //Spremenjena oblika datuma
        $date = date_create($row["ura"]);
        $ura_pobiranja = date_format($date,"H:i");
        echo "<div class=\"row list  divider-gray\">
                <div class=\"col-1 fs-09 fw-600\">" . $row["id"] . " </div>
                  <div class=\"col-3 flex-vcenter-items fw-600 fs-09\">" . $row["naslov"] . " </div>
                <div class=\"col-1 flex-vcenter-items fw-600 fs-09\">$ura_pobiranja</div>
            ";

        if ($row["naslov"] !== null) {
            echo " <div class=\"col-6 flex-vcenter-items fs-1\">
                            <form id='form' action='' method='POST'>
                                 <input id='id' name='potnik' value='".$row["id"]."' type='hidden' /> 
                                 <input id='cas' class=\"form-control fancy-border\" type=\"text\" name=\"posodobljeni_cas\"/>
                                 <input class='btn btn-outline-primary' id='submit' type='submit' value='Nastavi uro'>
                             <label id=\"info\"></label>
                         </form>
                     </div>";
            echo " </div>";//update.php?id=" . $row["id"] . "
        }
        else {
            echo " </div>";
        }
    }
} else {
    echo "<div class=\"col flex-vcenter-items fw-100 fs-1\"><i class=\"far fa-frown-open pr-3\"></i>Nimaš še nobenih opravil
                                    </div>";
}

JAVASCRIPT

//Async update
    $(function () {
        $('#form').on('submit', function (e) {
            let idrow = $("#id").val();
            let updaterow = "update.php?id=";
            console.log(updaterow + idrow);
            e.preventDefault();

            $.ajax({
                type: 'post',
                url: updaterow + idrow,
                data: $('#form').serialize(),
                success: function () {
                    console.log('ura posodobljena');

                    //Async select update
                    $.ajax({
                        type: 'post',
                        url: 'prevoznik.php',
                        data: $('.list'),
                        success: function () {
                            console.log('Select izveden');
                        }
                    });

                }
            });
        });
    });
});

我认为 data: $('.list') 应该被替换，但我不知道我应该在这里插入什么。

Answer 1

   $.ajax({
            type: 'post',
            url: 'prevoznik.php',
            data: $('.list')
        }).done(function(data) {
            console.log('Select izveden');
            $('.list').append(data)
        });