Javascript Ajax新手学习（PHP JQuery）

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

我有一个页面如下所示：

我正在使用PHP和JQuery。每当我单击任何

tr

，它都会获取id，并将数据库中分配给该id的数据放在表单上。所以我可以更新用户的数据

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

当您单击每个

tr

（Eliminar）的最后一个

td

时，它会从数据库中删除该用户

我的文件：

//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>";
}
?>

• 构建页面的控制器（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>";
}
?>

//事件船长
$（文档）.ready（函数（）{
//在登记册的实际实施过程中，需要更多的信息
$（“#tablaDatos tr td:not（：last child”）。单击（function（）{
如果（确认（“？是否需要修改注册表？”）{
$（“#idSelected”）.val（$（this）.closest（'tr'）.attr（'id'））；
var data=$（'#idSelected'）.serialize（）；
美元邮政(
“crud.php”，
{data:data}，
功能（响应）{
$（'#result'）.html（响应）；
}
);
返回false；
}否则
返回false；
});
//在登记册上的列表中单击
$（“#tablaDatos输入”）。单击（函数（）{
如果（确认（“？”是否需要登记注册）{
$（“#idSelected”）.val（$（this）.closest（'tr'）.attr（'id'））；
$（“eliminar”）.val（“eliminar”）；
var data=$（'#idSelected'）.serialize（）；
美元邮政(
“crud.php”，
{data:data}，
功能（响应）{
$（'#result'）.html（响应）；
}
);
返回false；
}否则
返回false；
}); 
//点击Alta/Modifical para envirar los datos al crud a través de post
$（“#提交”）。单击（函数（）{
var data=$（'#envioDatos'）.serialize（）；
美元邮政(
“crud.php”，
{data:data}，
功能（响应）{
$（'#envioDatos'）.html（回复）；
$（“#环境数据输入，文本区域”）.val（“”）；
});
返回false；
});
});

一般来说，Ajax用于异步地对数据执行某些操作。单击页面上的某个内容，数据将被发送到其他地方进行操作，操作的结果将作为响应返回。然后，您可以根据该响应采取行动

在您的例子中，假设您想要删除某个客户机。例如，您可以对clientDataEdit.php执行ajax调用，并告诉它删除具有特定ID的学生

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

然后在php中检查调用的函数（本例中为delete）并执行必要的操作

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

然后回到客户端页面，捕捉响应并对其执行操作：

---

这应该会给你一个“执行状态：OK”的警报。如果一切正常，你应该用必要的本地操作（例如隐藏表单、转发到另一页、加载另一个表单等）来替换该警报.

这里似乎没有解析PHP。显示您的代码和使用的扩展名，以及PHP是否正在运行/安装，以及您如何访问该文件。2秒后，一位“专家”已经-1，这只是因为我是一名新手正在尝试学习。哇，谢谢！在您的第二页中，您没有使用json_编码，而可能只是var_转储了该数组-她e:一个教程：我很难理解这个问题。问题是：为什么会有“代码”显示在那里，而不是被解析？我的第一条评论没有回答。你需要显示你的PHP，我们不知道你是如何访问这些文件的，在托管站点上，在你自己的PC上，如果本地为

http://localhost/file.php

或as

c:///file.php

？as

.htm

？不知道对不起。希望我能帮你更多。另外：不完全是我的情况，但我明白你想说的。抱歉，我不能说得更具体。我想我指出了ajax是如何使用的，因为你说你需要这方面的帮助。它非常强大和有用。你有客户端代码（js，jquery）和服务器代码（php）。Axaj是客户端和服务器之间的桥梁。