Apprendimento newbie Ajax (PHP JQuery)

Question

Sono nuovo di AJAX, sto provando a leggere un'intera pagina e modificare un elemento al suo interno senza aggiornare.

Ho una pagina che assomiglia a questo:

Sto usando PHP & JQuery. Ogni volta che clicco su qualsiasi tr, ottiene l'id e inserisce i dati assegnati nel db a quell'id, nel modulo. Così posso aggiornare i dati dell'utente.

Ovviamente quando il modulo è vuoto è un inserto standard nel database.

Quando si fa clic sull'ultimo td di ogni tr (Eliminar), l'utente viene eliminato dal database.

miei file:

• Un controller che costruisce la pagina (crud.php).
• Un database che contiene ogni metodo relativo al database (database.php)
• File CSS e un modello con html di base, js.

Voglio fare tutte queste pagine di aggiornamento con l'Ajax, ma ottengo qualcosa di simile:

Tutta la mia pagina è stata inserita sotto forma invece di sostituire la mia pagina con il nuovo o sostituendo solo il modulo con uno nuovo.

Qualche suggerimento/guida che può aiutarmi nell'apprendimento? Ho cercato tutti i contenuti AJAX correlati in questo sito. Anche sito JQuery ...

non davvero ottenere come funziona AJAX e come relazionarsi con il JS e PHP

codice rilevante:

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

In generale l'Ajax viene utilizzato per eseguire alcune manipolazioni sui dati in modo asincrono. Fai clic su qualcosa nella tua pagina, i dati vengono inviati da un'altra parte per essere manipolati e il risultato di tale manipolazione viene restituito come risposta. È quindi possibile agire in base a tale risposta.

Nel tuo caso, dì che vuoi cancellare qualche cliente. Puoi eseguire una chiamata Ajax al tuo clientDataEdit.php e dirgli di cancellare uno studente con un ID specifico, ad esempio.

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

Poi, nel tuo php di controllare quale funzione viene chiamato (eliminare in questo caso) ed eseguire la manipolazione necessaria

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

Poi torna sulla pagina cliente si cattura la risposta e agire su di esso :

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

Questo dovrebbe darvi un avviso "Stato di esecuzione: OK". Se fosse tutto ok.È necessario sostituire tale avviso con le necessarie manipolazioni locali (ad esempio nascondere il modulo, inoltrare a un'altra pagina, caricare un altro modulo, qualunque sia realmente).