我是

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;

});

});

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

" . $text;

print_r ( $value );

echo "

";

}

?>