使用 Ajax 加载更新数据不起作用

Question

我有一个可以插入、更新和删除数据的管理页面。我想在执行任何这些操作时显示一个简单的加载 gif。所有这 3 个操作都完美无缺，但是当我尝试用它做一些 Ajax 时，它停止工作了。

下面是我的 Ajax 代码。此代码仅在提交表单后显示一个 div，其中包含加载 gif，如果成功完成，则再次隐藏它。就这么简单。

$("#form").submit(function(e) {
    e.preventDefault();

    $("#loading").show();

    $.ajax({
        url: "Operations.php",
        dataType: "HTML",
        success: function() {
            $("#loading").hide();
        }
    });
});

现在，每个表单执行的 Operations.php 包含 3 个数据库操作。它存储由 hidden 字段发送的 class 的名称，从提交的表单的 button 接收值，并根据其值实例化 ServiceDatabase 传递class 并执行一项操作。

$class = filter_input(INPUT_POST, "class");
$id = filter_input(INPUT_POST, "id");

@require_once "../../php/Connection.php";
@require_once "../../php/ServiceDatabase.php";
@require_once "../../php/" . $class . ".php";

$Operation = new ServiceDatabase($connection, new $class);

switch ($_REQUEST["submit"]) {
    case "insert":
        $Operation->setPostVariables();
        $Operation->insert();
        break;
    case "update":
        $Operation->setPostVariables();
        $Operation->update($id);
        break;
    case "delete":
        $Operation->delete($id);
        break;
}

最后，就是表格。

<form id="form" class="center-block" action="Operations.php" method="post">
    <h3>Alterar - <small><?php echo $class ?></small></h3>

    <input type="hidden" value="<?php echo $class ?>" name="class"/>
    <input type="hidden" value="<?php echo $id ?>" name="id"/>

    <?php echo $Table->generateAdminTables($id); ?>

    <button type="submit" name="submit" value="update" class="btn btn-success btn-update">Atualizar</button>
</form>

发生的事情是数据库操作（在本例中为更新）不起作用，就像它没有到达 Operations.php 文件一样。

Answer 1

您需要设置从表单中获取的 POST 数据。

$.ajax({
    url: "Operations.php",
    method: "POST", // defaults to get
    data: $(this).serialize(), // get the form data and send it
    dataType: "HTML",
    success: function() {
        $("#loading").hide();
    }
});

Answer 2

$_REQUEST 似乎不适用于 Ajax。真是惊喜。

我的解决方案是：我在表单中创建了一个新的 hidden 以通过 jQuery 接收点击的 button:

的 value

btnValue = "";
$("#form button").click(function() {
    btnValue = $(this).attr("value");
});

然后在 $.ajax 之前，我设置 hidden 值：

$(this).find("#action").attr("value", btnValue);

在我的 Operations.php 中，收到一个新的 $_POST 值

$action = filter_input(INPUT_POST, "action");

而在 switch 块中，我只检查 $action

switch ($action) {
    case "insert": ...
    case "update": ...
    case "delete": ...
}

工作完美。

Answer 3

试试这个。我还没有测试过，但它会起作用。

$("#form").submit(function (e) {
    e.preventDefault();

    $("#loading").show();

    $.ajax({
        url: "Operations.php",
        dataType: "HTML",
        success: function () {
            $("#loading").hide();
        },
        error: function (data) {
        },
        complete: function (data) {
            $("#loading").hide();
            //A function to be called when the request finishes
            // (after success and error callbacks are executed).
        }
    });
});

使用 Ajax 加载更新数据不起作用

Updating data with Ajax loading does not work

javascript

php

forms

ajax

gif