Listas enlazadas con Ajax y Json

Ejemplo de lo que se puede hacer con JSON como alternativa al XML.

Datos del Auto

Marca: Elija un modelo Mitsubishi Nissan Toyota Volkswagen

Modelo:

El código

Este es el formulario que contiene los elementos HTML y la llamada al javascript que gestiona la llamada al motor Ajax (a traves de la libreria Prototype v1.4). Simplemente llamamos a la función reqGetModelos() en el evento onChange del select de nombre auto_marca.

<form method="post" action="#">
<fieldset>
  <legend>Datos del Auto</legend>
  <p>
  <label for="auto_marca">Marca:</label>
  <select id="auto_marca" name="auto[marca]" onchange="reqGetModelos()">
    <option value="-1">Elija un modelo</option>
    <option value="mitsubishi">Mitsubishi</option>
    <option value="nissan">Nissan</option>
    <option value="toyota">Toyota</option>
    <option value="volkswagen">Volkswagen</option>	
  </select>
  </p>
  <p>
    <label for="auto_modelo">Modelo:</label>
    <select id="auto_modelo" name="auto[modelo]">
    </select>
  </p>
</fieldset>
</form>

En el cuadro anterior reqGetModelos() es llamado. Estas son las funciones javascript que gestionan el requerimiento y la respuesta en el lado del cliente. Simplemente leemos el valor del select auto_marca y se lo enviamos como parametro a la página del lado del servidor que ha de devolvernos los modelos de la marca enviada.

Al completarse la llamada se ejecuta la función resGetModelos que toma como argumento la cadena de respuesta del servidor y (aqui viene lo interesante) como ésta viene en formato JSON solo es necesario un eval() para parsear la respuesta y tener un elemento javascript nativo que podemos recorrer para popular nuestra segunda lista 'auto_modelo'.

** En éste ejemplo hago uso de la función eval porque la cadena de respuesta esta llegando de mi propio servidor y no hay peligro de ejecutar algun 'cross-site script'. Si van a parsear una respuesta externa usen un parser json en lugar de la funcion eval de javascript.

function reqGetModelos() {

	var marca	= $F('auto_marca');

	var url 	=	'../ajax/resGetModelos.php';
	var pars	= 'marca='+escape(marca);

	var myAjax = new Ajax.Request(
	url,
	{
		method: 'get',
		parameters: pars,
		onComplete: resGetModelos
	});
}

function resGetModelos(originalRequest)	{

	eval("var modelos=" + originalRequest.responseText);

	var objDDL = $('auto_modelo')

	objDDL.options.length = 0;

	for(i=0;i<modelos.length;i++){

		var text	= unescape(modelos[i].text);
		var value	= unescape(modelos[i].value);
		var option	= new Option(text,value);

		try{
			objDDL.add(option,null);
		}catch (e){
			objDDL.add(option,-1);
		}
	}
}

Y por último, éste es el script PHP que se encarga de recorrer la Base de Datos y devolver los valores requeridos en formato JSON. Noten que para el query uso la libreria DB de PEAR la cual devuelve un objeto asociativo 'value' -> 'text' que facilmente es formateado como JSON usando también una libreria de PEAR llamada JSON-PHP.

<?php

require_once ("../setEnv.php");
require_once ("JSON.php");


  $_REQUEST['marca']	= urldecode($_REQUEST['marca']);


  #datos del usuario
  $sql = " SELECT id_modelo AS value, modelo AS text FROM ejemplo_autos
	   WHERE marca='{$_REQUEST['marca']}' ORDER BY modelo";
  
  $modelos = $db->getAll($sql);
	
  if ( !is_array($modelos) ) {
		
    $res = 'false';
  }
  else {
  
    #codifico la data de usuario
    $json	= new Services_JSON();
    $res	= $json->encode($modelos);
}

die($res);

?>