Foros del Web - Ver Mensaje Individual

NSD · #2 (**permalink**) 08/09/2014, 12:36

Código PHP:

Ver original// server_ajax.php
<?php
// $_POST['codigo'] trae el codigo a buscar.
 
// ... Conectarse a la base de datos 
// ... SELECT precio, descripcion FROM articulos WHERE codigo = $_POST['codigo'];
// ... Guardar la primera fila en $row
 
/*/ 
 * Datos de ejemplo para la prueba, este array debe obtenerse de la base de datos.
 * Esto solo es con fines ilustrativos.
/*/
 if($_POST['codigo'] < 50 && $_POST['codigo'] > 0)
    $row = ["codigo" => $_POST['codigo'], "precio" => $_POST['codigo']*7, "descripcion" => "Articulo #$_POST[codigo]"];
 else
    $row = false;
// Fin de datos ilustrativos.
 
print json_encode(["status" => ($row ? 1 : 0), "data" => $row]);
exit();

Código HTML:

Ver original<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <title>Demo Ajax Load</title>
        <script>
            function load_ajax()
            {
                var codigo  = document.getElementById("codigo").value;
                document.getElementById("codigo").value = "";
                
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange=function()
                {
                    if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {   
                        var row = JSON.parse(xmlhttp.responseText);
                        if(row.status == 1)
                        {
                            var tbody  = document.getElementById("table").getElementsByTagName("tbody")[0];
                            tbody.innerHTML += '<tr>'+
                                                    '<td>'+row.data.codigo+'</td>'+
                                                    '<td>'+row.data.descripcion+'</td>'+
                                                    '<td>$ '+row.data.precio+'</td>'+
                                                '</tr>';
                        }
                        else 
                            alert("No se ha encontrado el codigo.");
                    }
                }
                xmlhttp.open("POST", "server_ajax.php", true);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlhttp.send("codigo="+codigo);         
            }
        </script>
    </head>
    <body>
        <table id="table">
            <thead>
                <tr>
                    <th colspan="3"><input type="number" id="codigo"><input type="button" value="LOAD" onclick="load_ajax();"></th>
                </tr>
                <tr>
                    <th>Codigo</th>
                    <th>Descripcion</th>
                    <th>Precio</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </body>
</html>