Rellenar <select> con AJAX y JSON

[kasmo]

Hola buenas, Estoy empezando a usar AJAX y quisiera saber como resolver el siguiente caso ya que no encuentro como hacerlo (Vengo de asp.net y era bastante más sencillo):

Tengo en mi html dos etiquetas select (pongamos como ejemplo uno para paises y otra para ciudades) y quiero que al seleccionar el país, se ejecute un PHP el cual me va a devolver unos datos. Esto podría ser mediante una consulta SELECT de SQL o mediante otro proceso, al fin y al cabo son datos que debo devolver en un foreach().

Podíais ponerme un ejemplo o un enlace a algún ejemplo que funcione así? Gracias de antemano.

[baldaweb]

Si es tu primera vez en ajax debes tener paciencia.

Buscando en google tendrás muchos ejemplos, por si te ayuda:


https://es.stackoverflow.com/questio...-no-se-enlazan

[manuparquegiralda]

A ver te pongo un ejemplo muy secillo para que puedas estrapolarlo. Ten en cuenta que lo he escrito directamente aquí y puede tener errores tipográficos.

Archivo HTML

Código HTML:

<select name="pais">
    <option value="">Selecciona...</option>
    <option value="Francia">Francia</option>
    <option value="España">España</option>
</select>
<select name="provincia">
    <option value="">Selecciona un país</option>
</select>
 

Código Javascript:

var select = document.querySelector( "select[name=pais]" );
select.addEventListener( "change", ( ev ) => {
    var value = ev.currentTarget.value;
    
    // Si no hay valor detenemos.
      
    if( !value ) {
        document.querySelector( "select[name=provincia]" ).innerHTML = '<option value="">Selecciona un país</option>';
        return false;
    }
 
    // Realizamos solicitud por AJAX
 
    var xhr = new XMLHttpRequest();
    var data = new FormData();
 
    data.append( "pais", value );
 
    // Escucha del completado
 
    xhr.addEventListener( "load", ( ev ) => {
        var EVAL = eval;
        var r = xhr.responseText;
        var o = EVAL( "(" + r + ")");
 
        if( o.estado === "OK" ) {
            document.querySelector( "select[name=provincia]" ).innerHTML = o.datos;
        } else {
            console.log( o.error );
        }
    }, false);
 
    // Enviío al script
 
    xhr.open( "POST", "/script.php" );
    xhr.send( data );
});
 

Script.php

Código PHP:

// Creamos objeto de respuesta
 
$RESPONSE = new stdClass();
$RESPONSE->estado = "KO";
$RESPONSE->datos = "";
$RESPONSE->error = "";
 
// Consultamos las provincias en la base de datos.
 
$query = $mysqli->query( "SELECT provincia FROM provincias WHERE pais = '" . $_POST[ "pais" ] . "'" );
 
// Comprobamos el error.
 
if( $mysqli->error ) {
    $RESPONSE->error = $mysqli->error;
    echo json_encode( $RESPONSE );
    die();
}
 
// Creamos los datos con los options.
 
while( $resQuery= $query->fetch_assoc()) {
    $RESPONSE->datos .= '<option value="' . $resQuery[ "provincia" ] . '">' . $resQuery[ "provincia" ] . '</option>';
}
 
// Devolvemos los datos
 
$RESPONSE->estado = "OK";
echo json_encode( $RESPONSE );
 

Como ves es algo muy sencillo. A través de javascript escuchamos cuando cambia el select de "pais". Obtenemos su valor y lo enviamos al script donde extraeremos las provincias del páis.

Obviamente, la estructura de la base de datos me la he inventado y doy por supuesto que sabes crear la conexión con la base de dato.

Después en el script PHP creamos un objeto de respuesta, realizamos la consulta y vamos concatenadno en los datos de la respuesta los inputs. Esto bien lo puedes hacer así o puedes enviar los datos en un array y montar los options en javascript. Eso ya lo decides tú.

En la función que escucha la respuesta AJAX, obtenemos los datos devueltos por el script y los decodificamos y en función del estado de la respuesta hacemos lo que necesitemos.

Espero que te sirva.

[kasmo]

Muchísimas gracias a las 2 personas que me habéis respondido. Efectivamente no es algo complicado de hacer pero al tener que cambiar el chip de la manera en la que lo hacía en otro lenguaje me quedaba un poco pillado. MUCHAS GRACIAS!!!