Ajax newbie learning (PHP JQuery)

Question

Я новичок в AJAX, я пытаюсь прочитать целую страницу и изменить элемент внутри нее без обновления.

У меня есть страница, которая выглядит следующим образом:

Я использую PHP & JQuery. Всякий раз, когда я нажимаю на любой tr, он получает идентификатор и помещает данные, назначенные в db, этому идентификатору в форме. Поэтому я могу обновить данные пользователя.

Очевидно, что, когда форма пуста, она является стандартной вставкой в ​​базе данных.

Когда вы нажимаете последний td каждого tr (Eliminar), он удаляет этого пользователя из базы данных.

Мои файлы:

• Контроллер, который создает страницу (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 используется для выполнения некоторых манипуляций с данными асинхронно. Вы нажимаете что-то на своей странице, данные отправляются куда-то еще, чтобы их можно было манипулировать, и результат этой манипуляции возвращался как ответ. Затем вы можете действовать на основе этого ответа.

В вашем случае, скажем, вы хотите удалить какого-либо клиента. Вы можете выполнить вызов ajax для вашего clientDataEdit.php и сообщить ему удалить студента с определенным идентификатором, например.

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

Это должно дать вам предупреждение «Статус выполнения: ОК». Если все было в порядке.Вы должны заменить это предупреждение необходимыми локальными манипуляциями (например, скрыть форму, перейти на другую страницу, загрузить другую форму, что бы это ни было на самом деле).