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

I have an admin page which can insert, update and delete data. I want to display a simple loading gif while doing any of these operations. All of the 3 operations work perfectly, but when I try to make some Ajax with it, it stops working.

Below is my Ajax code. This code simply shows a div which has the loading gif within it, right after submitting the form, and if it's successfully accomplished, hides it again. That easy.

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

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

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

Now, the Operations.php, that is executed by every form, contains the 3 database operations. It stores the name of the class sent by a hidden field, receives the value from the button of the submitted form and depending on its value, it instantiates the ServiceDatabase passing the class and perform one action.

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

And finally, just the form.

<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>

What happens is that the database operation, in this case, the update, doesn't work, like if it is not reaching the Operations.php file.

It seems $_REQUEST doesn't work with Ajax. What a surprise.

My solution is: I created a new hidden in the forms to receive via jQuery the value of the clicked button:

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

Then right before the $.ajax, I set the hidden value:

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

In my Operations.php, a new $_POST value is received

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

And in the switch block, I just check $action

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

Worked perfectly.

You need to set the POST data which you get from the form.

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

Try this one. I have not tested but it will work.

$("#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).
        }
    });
});