javascript - Ajax新手学习(PHP JQuery)

Question

我是 AJAX 的新手，我正在尝试读取整个页面并在不刷新的情况下更改其中的元素。

我有一个看起来像这样的页面:

我正在使用 PHP 和 JQuery。每当我单击任何 tr 时，它都会获取 id 并将 db 中分配的数据放入表单中的该 id。所以我可以更新用户的数据。

显然，当表单为空时，它是数据库中的标准插入。

当您单击每个 tr (Eliminar) 的最后一个 td 时，它会从数据库中删除该用户。

我的文件:

• 构建页面的 Controller (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”。如果一切都好的话。您应该用必要的本地操作替换该警报(例如隐藏表单、转发到另一个页面、加载另一个表单，无论实际情况如何)。