Foros del Web » Programando para Internet » Javascript »

Rellenar <select> con AJAX y JSON

Estas en el tema de Rellenar <select> con AJAX y JSON en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/02/2019, 02:25
 
Fecha de Ingreso: noviembre-2012
Mensajes: 65
Antigüedad: 6 años, 8 meses
Puntos: 2
Rellenar <select> con AJAX y JSON

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.
  #2 (permalink)  
Antiguo 15/02/2019, 06:21
Avatar de baldaweb  
Fecha de Ingreso: septiembre-2010
Ubicación: Barco pirata
Mensajes: 239
Antigüedad: 8 años, 9 meses
Puntos: 20
Respuesta: Rellenar <select> con AJAX y JSON

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
__________________
CHOOO COOO LAAA TEEEEEEEEE
  #3 (permalink)  
Antiguo 15/02/2019, 09:57
Avatar de manuparquegiralda  
Fecha de Ingreso: junio-2012
Ubicación: Barcelona
Mensajes: 241
Antigüedad: 7 años
Puntos: 39
Respuesta: Rellenar <select> con AJAX y JSON

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:
Ver original
  1. <select name="pais">
  2.     <option value="">Selecciona...</option>
  3.     <option value="Francia">Francia</option>
  4.     <option value="España">España</option>
  5. <select name="provincia">
  6.     <option value="">Selecciona un país</option>

Código Javascript:
Ver original
  1. var select = document.querySelector( "select[name=pais]" );
  2. select.addEventListener( "change", ( ev ) => {
  3.     var value = ev.currentTarget.value;
  4.    
  5.     // Si no hay valor detenemos.
  6.      
  7.     if( !value ) {
  8.         document.querySelector( "select[name=provincia]" ).innerHTML = '<option value="">Selecciona un país</option>';
  9.         return false;
  10.     }
  11.  
  12.     // Realizamos solicitud por AJAX
  13.  
  14.     var xhr = new XMLHttpRequest();
  15.     var data = new FormData();
  16.  
  17.     data.append( "pais", value );
  18.  
  19.     // Escucha del completado
  20.  
  21.     xhr.addEventListener( "load", ( ev ) => {
  22.         var EVAL = eval;
  23.         var r = xhr.responseText;
  24.         var o = EVAL( "(" + r + ")");
  25.  
  26.         if( o.estado === "OK" ) {
  27.             document.querySelector( "select[name=provincia]" ).innerHTML = o.datos;
  28.         } else {
  29.             console.log( o.error );
  30.         }
  31.     }, false);
  32.  
  33.     // Enviío al script
  34.  
  35.     xhr.open( "POST", "/script.php" );
  36.     xhr.send( data );
  37. });

Script.php
Código PHP:
Ver original
  1. // Creamos objeto de respuesta
  2.  
  3. $RESPONSE = new stdClass();
  4. $RESPONSE->estado = "KO";
  5. $RESPONSE->datos = "";
  6. $RESPONSE->error = "";
  7.  
  8. // Consultamos las provincias en la base de datos.
  9.  
  10. $query = $mysqli->query( "SELECT provincia FROM provincias WHERE pais = '" . $_POST[ "pais" ] . "'" );
  11.  
  12. // Comprobamos el error.
  13.  
  14. if( $mysqli->error ) {
  15.     $RESPONSE->error = $mysqli->error;
  16.     echo json_encode( $RESPONSE );
  17.     die();
  18. }
  19.  
  20. // Creamos los datos con los options.
  21.  
  22. while( $resQuery= $query->fetch_assoc()) {
  23.     $RESPONSE->datos .= '<option value="' . $resQuery[ "provincia" ] . '">' . $resQuery[ "provincia" ] . '</option>';
  24. }
  25.  
  26. // Devolvemos los datos
  27.  
  28. $RESPONSE->estado = "OK";
  29. 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.
__________________
Diseño Web - Arisman Web

Última edición por manuparquegiralda; 15/02/2019 a las 10:04
  #4 (permalink)  
Antiguo 18/02/2019, 04:23
 
Fecha de Ingreso: noviembre-2012
Mensajes: 65
Antigüedad: 6 años, 8 meses
Puntos: 2
Respuesta: Rellenar <select> con AJAX y JSON

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!!!



La zona horaria es GMT -6. Ahora son las 06:11.