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]);
Código HTML:
Ver original<!-- index.html -->
<!DOCTYPE html>
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>'+
}
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);
}
<th colspan="3"><input type="number" id="codigo"><input type="button" value="LOAD" onclick="load_ajax();"></th>