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

Question

我有一个管理页面，可以插入，更新和删除数据。 我想在执行任何这些操作时显示一个简单的加载gif。 这三个操作都可以完美地工作，但是当我尝试用它制作一些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字段发送的类的名称，从提交的表单的button接收值，并根据其值实例化传递该类的ServiceDatabase并执行一项操作。

$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接收clicked 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).
        }
    });
});