Ajax新手學習（PHP的jQuery）

Question

我是新來的AJAX，我想讀整個頁面，並更改其中的一個元素，而不刷新。

我有一個頁面，看起來像這樣：

我使用PHP & JQuery的。每當我點擊任何tr時，它都會獲得該id，並將分配給db的數據放到該窗體上的該id上。所以我可以更新用戶的數據。

顯然，當表單爲空時，它是數據庫中的標準插入。

當您單擊每個tr（Eliminar）的最後td時，它將從數據庫中刪除該用戶。

我的文件：

• 是構建頁面（crud.php）控制器。
• 包含每個數據庫相關的方法（database.php中）
• CSS文件，並用基本的HTML模板，JS的數據庫。

我要讓所有的Ajax此刷新頁面，但我得到的是這樣的：

我所有的頁面已經被插入的形式，而不是用新的替代我的網頁，或者只用新的形式替換表單。

任何可以幫助我學習的提示/指南？我在本網站搜索了所有相關的AJAX內容。此外JQuery的網站...

我真的不明白AJAX是如何工作的，以及如何與JS和PHP涉及它

相關代碼：

//Capturador de eventos 
$(document).ready(function(){ 
//Clickar en cualquier lado del tr (menos el ultimo td) para actualizar ese registro 
$("#tablaDatos tr td:not(:last-child").click(function() { 
    if (confirm("¿Seguro que desea modificar el registro?")){ 
     $("#idSelected").val($(this).closest('tr').attr('id')); 
     var data = $('#idSelected').serialize(); 
     $.post(
       'crud.php', 
       {data: data}, 
       function(response){ 
        $('#result').html(response); 
       } 
     ); 
     return false; 
    }else 
     return false; 
}); 

//Clickar en el borrar del listado para eliminar ese registro 
$("#tablaDatos input").click(function(){ 
    if (confirm("¿Seguro que deseas borrarlo del registro?")){ 
     $("#idSelected").val($(this).closest('tr').attr('id')); 
     $("#eliminar").val("Eliminar"); 
     var data = $('#idSelected').serialize(); 
     $.post(
       'crud.php', 
       {data: data}, 
       function(response){ 
        $('#result').html(response); 
       } 
     ); 
     return false; 
    }else 
     return false; 
}); 
// Clickar en Alta/Modificar para enviar los datos al crud a través de post 
$('#submit').click(function() { 
    var data = $('#envioDatos').serialize(); 
    $.post(
      'crud.php', 
      {data: data}, 
      function(response){ 
       $('#envioDatos').html(response); 
       $("#envioDatos input, textarea").val(''); 
      }); 
    return false; 
    }); 
}); 

<?php 
// INCLUDES 
include 'lib/pintarHTML.php'; 
include 'lib/database.php'; 

// VARS 
$tableName = 'ALEJANDRO'; 
$clientes = array(); 
$page = null; 
$body = null; 
$elemSel = null; 
$obj_pintar = new pintarHTML(); 
$ID = null; 
$result = null; 
$type = null; 

// CONECTION DB 
$obj = new database(); 

// POST READ 
if (isset ($_POST)) { 
    mpr($_POST); 

    if ($_POST['alta'] == "Alta" && empty ($_POST['id'])) { 
     // Llamo a insertar 
     $result = $obj->insert ($_POST); 
    } else 
    if ($_POST['modificacion'] == "Modificacion" && ! empty ($_POST['id'])) { 
     // Llamo a modificar 
     $result = $obj->update ($_POST); 
    } else 
    if ($_POST['eliminar'] == "Eliminar" && ! empty ($_POST['idSelected'])) { 
     // Llamo a eliminar 
     $result = $obj->delete ($_POST); 
    } else 
    if ($_POST['idSelected'] && empty ($_POST ['eliminar'])) { 
     // Elemento Seleccionado 
     $ID = $_POST['idSelected']; 
    } 
} 

// Client list 
$clientes = $obj->select ($tableName); 


// Title 
$body .= $obj_pintar->pintarTitulo ('LISTADO DE CLIENTES'); 


// Check ID 
if (isset ($ID)) { 
// Formulario relleno con los datos del usuario para modificarlos 
    $elemSel = $obj->select ($tableName, '*', 'id=' . $ID, null); 
    $body .= $obj_pintar->pintarFormulario ($elemSel); 
} else { 
    // Formulario vacío para alta de usuario 
    $body .= $obj_pintar->pintarFormulario ($elemSel); 
} 


// Page echo 
if (!empty($result)) { 
    $body .= $obj_pintar->pintarMessage($result); 
} 


$body .= $obj_pintar->pintarTable ($clientes); 

$page = $obj_pintar->composeHTML ($body); 

echo $page; 

// Debug 
function mpr($value, $text = null) { 
    echo "<pre>" . $text; 
    print_r ($value); 
    echo "</pre>"; 
} 
?> 

Answer 1

一般的Ajax使用用於對數據進行異步操作。您點擊頁面上的某些內容，將數據發送到其他地方進行操作，並將該操作的結果作爲響應返回。然後你可以根據這個迴應採取行動。

就你而言，假設你想刪除一些客戶端。例如，您可以對您的clientDataEdit.php執行ajax調用，並告訴它刪除具有特定ID的學生。

$.post("clientDataEdit.php", { function: "Delete", id: "#someID" }); 

然後在你的PHP你檢查正在調用什麼功能（在這種情況下刪除），並進行必要的操作

if(isset($_POST['function'])){ 
if(($_POST['function'])=="Delete"){ 
    //perform the manipulation and respond 
    echo "OK"; 
    } 
} 

然後回到你趕上它的反應和行爲的客戶端頁面上：

$.post("clientDataEdit.php", { function: "Delete", id: "#someID" }) 
    .done(function(data) { 
    alert("Execution status: " + data); 
    }); 

這應該會給你一個警告「執行狀態：OK」。如果一切正常。您應該用必要的本地操作來替換該警報（例如隱藏表單，轉發到另一頁，加載另一個表單，無論如何）。