使用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). 
     } 
    }); 
});