使用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字段发送的类的名称，接收来自提交表单的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

看来$_REQUEST不适用于Ajax。真是一个惊喜。

我的解决办法是：我在形式创造了一个新的hidden通过jQuery接收点击button的value：在$.ajax前右

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

然后，我设置的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 2

您需要设置从表单中获得的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 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). 
     } 
    }); 
});