No es algo dificil de hacer con ajax yo estuve haciendo algo parecido te lo adapte un poco mira este es el codigo javascript...
Código PHP:
var objetoXhr = Xajax();
var READY_STATE_UNINITIALIZED = 0;
var READY_STATE_LOADING = 1;
var READY_STATE_LOADED = 2;
var READY_STATE_INTERACTING = 3;
var READY_STATE_COMPLETE = 4;
var READY_STATUS = 200;
function Xajax() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function cargarAjax(url,metodo,funcion,parametros,objetoAjax) {
if (objetoAjax) {
objetoAjax.onreadystatechange = funcion;
objetoAjax.open(metodo,url,true);
objetoAjax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
objetoAjax.send(parametros);
}
}
// aqui realizo la llamada y recepcion de datos con ajax y lo inserto
// en el div llenarDatos del codigo html...
function ajaxProduct() {
var texto = "";
var div = document.getElementById('llenarDatos');
if (objetoXhr.readyState == READY_STATE_COMPLETE) {
if (objetoXhr.status == READY_STATUS) {
var JSON = eval("("+objetoXhr.responseText+")");
texto += "<p>Codigo=" + JSON.Codigo + "</p>";
texto += "<p>Producto=" + JSON.Producto + "</p>";
texto += "<p>Marca=" + JSON.Marca + "</p>";
div.innerHTML = texto;
}
}
}
function llamarDatos() {
var elSelect = document.getElementById('productosSelect');
var codigo = elSelect.options[elSelect.selectedIndex].value;
var query = "codigo="+codigo+"&nocache="+Math.random();
cargarAjax("productos.php","POST",ajaxProduct,query,objetoXhr);
}
window.onload = function() {
document.getElementById('boton').onclick = llamarDatos;
}
y el codigo html...
Código HTML:
<select id="productosSelect">
<option value=1>Televisor</option>
<option value=2>Computadora</option>
<option value=3>Mp3</option>
</select>
<input type="button" id="boton" value="Ver Datos"/>
<div id="llenarDatos"></div>
Como veras hice un codigo html para dar un ejemplo donde puse 3 opciones al select cada value se corresponde con el codigo de un producto en la base de datos, ahora vamos al archivo productos.php...
Código PHP:
<?php
$codigo = $_POST['codigo'];
$link = mysql_connect("localhost","root");
$bd = "Ajax";
$elArray = array();
mysql_select_db($bd,$link);
$result = mysql_query("SELECT * FROM productos WHERE Codigo = '$codigo'");
while ($dato = mysql_fetch_row($result)) {
$codigo = $dato[0];
$producto = $dato[1];
$marca = $dato[2];
}
echo "{Codigo:'".$codigo."', Producto:'".$producto. "', Marca:'" . $marca . "'}";
?>
aca como ves es una simple consulta a la base donde lo importante es que recibo el codigo que manda javascript mediante la variable $_POST['codigo']; y el formato de salida que le doy al echo, es el formato de un objeto JSON de javascript donde el primer parametro va a ser una propiedad del objeto JSON definido en la funcion ajaxProduct y el 2do es el valor...
Sino entendes algo avisame es bastante largo como para comentarlo todo...
Salu2 y suerte :D
