La verdad es que lo siguiente será un ejemplo muy básico, pero sé que puede ser de mucha utilidad para quienes estén buscando una información similar. En mi caso particular, hace un par de años estaba desarrollando una aplicación web, y dentro del panel de control necesitaba generar una tabla que pudiese almacenar datos en tiempo real de consultas a la base de datos. Hasta acá suena bastante sencillo, pero nunca me había tocado hacer algo parecido, y si bien manejaba a la perfección PHP, este no servia para lo que quería, ciertamente podía generar una tabla con una consulta en tiempo real, pero el documento se ejecutaba cada vez que llamaba a la función y no era la interacción que necesitaba para la experiencia del usuario.
Luego de mucho investigar descubrí las bondades de AJAX y pude solucionar el requerimiento. Pero como a muchos, me tocó investigar por varios días y hacer muchas funciones de prueba. Para poder comprender todo lo que puedes hacer con el AJAX dejaré el siguiente diagrama:
 |
| Diagrama explicativo de como funciona AJAX |
La cosa es que la tecnología es bastante sencilla de implementar leyendo la respectiva documentación, sin embargo hay que entender como funciona: Ya que hablamos de Javascript, se ejecuta del lado del cliente, ergo no estás realizando ninguna operación todavía realmente, simplemente estás manipulando datos de algún input o tabla, pero hasta no pasarlos a un lenguaje que realmente trabaje del lado del servidor web, no estás haciendo operaciones. He allí lo que nos reúne el día de hoy, un ejemplo practico del paso de datos de un formulario bajo la lógica
HTML --> AJAX --> PHP
Inicialmente vamos a crear el Formulario en HTML:
<form method="post" id="testform" onsubmit="return false;">
<div class="input_form">
<select name ="Cliente" id ="Cliente" style="width:300px;border:1px solid #04467E;background-color:#FFFFFF;color:#2D4167;font-size:18px" onchange="this.style.width=500">
<option>Seleccionar cliente</option>
<?php echo $combobit; ?>
</select>
<br>
<select name= "Producto" id="Producto" method="post" style="width:300px;border:1px solid #04467E;background-color:#FFFFFF;color:#2D4167;font-size:18px" onchange="this.style.width=500">
<option>Producto</option>
<?php echo $combobitt; ?>
</select>
<input type="number" name="Cantidad" id="Cantidad" value="cantidad" min="1" max="9999" required >
</div><br>
<br>
<center><button id="bt_add" class="btn btn-default">Agregar</button></center>
<br>
<br>
</form>
<table id="tabla" class="table table-bordered">
<thead>
<tr>
<td>Nº</td>
<td>Producto</td>
<td>Cantidad</td>
</tr>
</thead>
</table>
<button id="bt_proce" type="submit" name="submit" class="btn btn-default">Procesar</button>
<button id="bt_del" class="btn btn-default">Eliminar</button>
<button id="bt_delall" class="btn btn-default">Eliminar todo</button>
<p id="result"></p>
El Javascript y el AJAX:
<script>
$(document).ready(function(){
$('#bt_add').click(function(){
agregar();
});
$('#bt_del').click(function(){
eliminar(id_fila_selected);
});
$('#bt_delall').click(function(){
eliminarTodasFilas();
});
$('#bt_proce').click(function(){
procesar();
});
});
var cont=0;
var id_fila_selected=[];
function agregar(){
var producto = document.getElementById("Producto").value;
var cantidad = document.getElementById("Cantidad").value;
cont++;
if (cont > 10){
alert("Máximo 10 Renglones por factura");
}else {
var fila='<tr class="selected" id="fila'+cont+'" onclick="seleccionar(this.id);"><td>'+cont+'</td><td>'+producto+'</td><td>'+cantidad+'</td></tr>';
$('#tabla').append(fila);
reordenar();
}}
function seleccionar(id_fila){
if($('#'+id_fila).hasClass('seleccionada')){
$('#'+id_fila).removeClass('seleccionada');
}
else{
$('#'+id_fila).addClass('seleccionada');
}
//2702id_fila_selected=id_fila;
id_fila_selected.push(id_fila);
}
function eliminar(id_fila){
/*$('#'+id_fila).remove();
reordenar();*/
for(var i=0; i<id_fila.length; i++){
$('#'+id_fila[i]).remove();
}
reordenar();
}
function reordenar(){
var num=1;
$('#tabla tbody tr').each(function(){
$(this).find('td').eq(0).text(num);
num++;
});
}
function eliminarTodasFilas(){
$('#tabla tbody tr').each(function(){
$(this).remove();
});
}
function procesar(){
var myTableArray = [];
$('#tabla tbody tr').each(function(){
var arrayOfThisRow = [];
var tableData = $(this).find('td');
if (tableData.length > 0) {
tableData.each(function() { arrayOfThisRow.push($(this).text()); });
myTableArray.push(arrayOfThisRow);
//JSON para envio
var arreglo = myTableArray;
var select = document.getElementById('Cliente');
var empresa = select.value;
// var dataString='arreglo='+arreglo;
var dataString= 'arreglo='+arreglo;
//var datadata= 'empresa'+empresa;
// var yourData ='myTableArray'+myTableArray;
}
$.ajax({
type:"POST",
url: "hi.php",
data: {dataString:dataString,empresa:empresa},
cache: false,
success: function(html) {
$('#result').html(html);
// $('#result').html(data); // here html()
}
// alert(data);
// $('#testform')[0].reset();//reset the form
// $('#result').html(data); // here html()
//alert('Submitted');
});
});
// alert(myTableArray);
}
Como podemos notar, acá se encuentra el Javascript de la tabla dinámica y el AJAX que envía al archivo PHP de nombre "hi.php"
Y finalmente, el documento PHP que recibe los datos e imprime los resultados en el DIV "resultado":
<?php $myString = $_POST['dataString']; $CLIENTE = $_POST['empresa']; print_r($myString); echo ($CLIENTE); ?>
Y listo, ya podemos trabajar diatónicamente con una tabla y enviar el arreglo por AJAX a PHP y realizar operaciones con esas variables.
Ciertamente mis ejemplos son bastante directos, pero están pensados en individuos con un nivel de conocimientos sobre la media en el área de programación. De cualquier forma, como les digo siempre. Puedo solventar cualquier duda en la caja de comentarios.
