You are here
Selección encadenados a AJAX con PHP Sin categoría 

Selección encadenados a AJAX con PHP

Selección encadenados a AJAX con PHP

En el tutorial de hoy, vamos a construir un conjunto de elementos selectos encadenados.

Al seleccionar una opción en una de ellas dará lugar a una actualización de la página, se muestra más opciones para refinar su selección.

Vamos a describir el lado del servidor con PHP opciones, por lo que es fácil para usted para conectar el ejemplo de hoy para una base de datos.

El HTML

Como se puede ver en la siguiente captura de pantalla, el cuadro de selección está acompañada de un título que explica lo que la selección se trata. El título y la caja de selección se incluyen en un elemento LI.

Selección encadenados a AJAX con PHP
Selección encadenados a AJAX con PHP

Al agregar más preguntas, lis adicionales son creados por jQuery. Todos ellos se sientan dentro de una lista desordenada llamada #questions . El título y las opciones para estos elementos se sirven como JSON, como se verá en la parte PHP del tut. Aquí está el margen de beneficio que se genera para los elementos li:

index.html – código generado

< Ul  ID = "preguntas" > 
	<! - Generado por jQuery -> 
	< li > 
		< p > ¿Qué le gustaría comprar? </ P > 
		< seleccione  técnica de marcador de posición = "Selecciona un producto 
			  En las siguientes secciones se insertan aquí en función de las opciones anteriores -> </ ul >
			  
			  
		
	
	

Usted puede notar en la página de demostración de que no estamos usando el navegador por defecto controles de selección. Esto se debe a que estamos haciendo uso del plugin de jQuery Elegido para actualizar nuestros selecciona en los widgets de lujo que se ven. Simplemente tenemos que llamar a la elegida () método en el que selecciona, y el plugin nos encargaremos del resto.

El código jQuery

Aquí es lo que hace nuestro código jQuery en fin – se obtiene la información de selección de cajas como JSON desde el servidor, genera su HTML, y establece los detectores de eventos para los cambios de selección. Si se produce un cambio en la selección, el proceso se repite para el nuevo elemento de selección.

En el código, esto se logra usando dos funciones de JavaScript:

  • refreshSelects desencadena el plugin elegido y se une detectores de eventos cada vez que se añade un elemento a la página;
  • fetchSelect solicita una alimentación JSON desde el servidor y genera el marcado de la respuesta.

Se los puede ver a continuación.

activos / js / script.js

$ ( Función () {

	var preguntas = $ ( '#questions' );

	función  refreshSelects () {
		 Var selecciona = questions.find ( 'select' );

		// Mejorar los selecciona con el plugin Elegimos
		selects.chosen ();

		// Escuchar cambios 
		selects.unbind ( "cambio" ) .bind ( "cambio" , la función () {

			// La opción seleccionada 
			var selecciona = $ ( este ) .find ( "opción" ) .EQ ( este .selectedIndex);
			 // Buscar la conexión de datos de atributo 
			var conexión selected.data = ( "conexión" );

			// La eliminación de los recipientes que siguen li (si los hay) 
			selected.closest ( '#questions li' ) .nextAll () remove ().;

			si (conexión) {
				fetchSelect (conexión);
			}

		});
	}

	var trabajo = false ;

	función  fetchSelect ( val ) {

		si (de trabajo) {
			 volver  falsa ;
		}
		trabajo = verdadero ;

		$ .getJSON ( 'ajax.php' , {clave: val}, la función ( r ) {

			var conexión, las opciones = '' ;

			$ each (r.items, la función ( k, v ) {
				Conexión = '' ;
				 si (v) {
					Conexión = "datos de la conexión =" ' + v + ' " ' ;
				}

				Opciones + = '<option value = "' + k + '"' + Conexión + '>' + k + '</ option>' ;
			});

			si (r.defaultText) {

				// El eligió plugin requiere que añadimos una opción vacía 
				elemento // si queremos visualizar un texto "Por favor seleccione"

				Opciones = '<option> </ option>' + opciones;
			}

			// Construir el margen de beneficio para la sección de selección

			$ ( '<Li> \
				<p> ' + r.title + ' </ p> \
				<seleccione técnica de marcador de posición = " ' + r.defaultText + '"> \
					' + Opciones + ' \
				</ Select> \
				<Span class = "divisor"> </ span> \
			</ li> ' ) .appendTo (preguntas);

			refreshSelects ();

			trabajo = false ;
		});

	}

	$ ( '#preloader' ) .ajaxStart ( Función () {
		$ ( Este ) .show ();
	}). ajaxStop ( función () {
		$ ( Este ) .hide ();
	});

	// Cargar inicialmente el producto seleccionar 
	fetchSelect ( 'productSelect' );
});

¡Estupendo! Ahora nos quedamos con la generación de la alimentación JSON real. Observe que elfetchSelect función toma un argumento de cadena. Esta es la clave estaremos pasando de nuevo a PHP, que indica cuál es el conjunto de elementos que queremos.

Aquí es un ejemplo de respuesta de nuestro script PHP:

{
     "Elementos" : {
         "Teléfonos" : "phoneSelect" ,
         "portátiles" : "notebookSelect" ,
         "Tablets" : ""
    },
    "title" : "¿Qué le gustaría comprar?" ,
     "DefaultText" : "Selecciona una categoría de producto" 
}

fetchSelect bucle a través de los artículos y utiliza las teclas como el contenido de los elementos de opción y los valores como las conexiones. Móviles y portátiles podrían causar la secuencia de comandos para generar nuevos cuadros de selección, mientras que las tabletas no lo haría.

Selección encadenados a AJAX con PHP
Selección encadenados a AJAX con PHP

El PHP

Necesitamos almacenar de alguna manera la información sobre los cuadros de selección, las opciones que contienen y las conexiones entre ellos. Con una base de datos esto podría hacerse mediante la selección de un conjunto específico de filas. Pero aquí nos va a almacenar estos datos de forma estática como objetos. Con este fin, vamos a definir una clase simple que contendrá la información de un cuadro de selección:

ajax.php / 1

// Cada cuadro de selección será una instancia de esta clase

clase  selectbox {
	 público  items $ = array ();
	 pública  $ DefaultText = '' ;
	 pública  $ titulo = '' ;

	pública  función  __construct ( $ título , $ predeterminado ) {
		 $ this -> DefaultText = $ predeterminado ;
		 $ this -> title = $ título ;
	}

	pública  función  addItem ( $ name , $ conexión = NULL) {
		 $ this -> artículos [ $ name ] = $ conexión ;
		 devolver  $ presente ;
	}

	pública  función  toJSON () {
		 retorno json_encode ( $ this );
	}
}

Ahora sólo tenemos que crear una instancia de esta clase para cada cuadro de selección, y llamar a laaddItem () para agregar opciones. Este método tiene una opción de conexión $ parámetro, que contiene el nombre de un cuadro de selección dependiente.

ajax.php / 2

/ * Configuración de las cajas de selección * /

// Selectbox Producto

$ productSelect = nueva caja de selección ( "¿Qué le gustaría comprar? ' , ' Elija una categoría de producto ' );
 $ productSelect -> addItem ( ' Móviles ' , ' phoneSelect ' )
			  -> addItem ( 'Cuadernos' , '' notebookSelect )
			  -> addItem ( 'tablets' , 'tabletSelect' );

// tipos de teléfono

$ phoneSelect = nueva caja de selección ( "¿Qué tipo de teléfono está interesado? ' , ' Elija un tipo de teléfono ' );
 $ phoneSelect -> addItem ( ' smartphones ' , ' smartphoneSelect ' )
			-> addItem ( 'Los teléfonos con funciones' , 'featurephoneSelect' );

// Los teléfonos inteligentes

$ smartphoneSelect = nueva caja de selección ( "¿Cuál es el teléfono inteligente deseada? ' , ' Elegir un modelo de smartphone ' );
 $ smartphoneSelect -> addItem ( ' Samsung Galaxy Nexus )
				 -> addItem ( 'iPhone 4S' , 'iphoneSelect' )
				 -> addItem ( 'Samsung Galaxy S2' )
				 -> addItem ( 'HTC Sensation' );

// Los teléfonos con funciones

$ featurephoneSelect = nueva caja de selección ( "¿Cuál es su FeaturePhone deseada? ' , ' Elija un teléfono característica ' );
 $ featurephoneSelect -> addItem ( ' Nokia N34 ' )
				   -> addItem ( "Sony Ericsson 334 ' )
				   -> addItem ( 'Motorola' );

// colores iPhone

$ iphoneSelect = nueva caja de selección ( "¿De qué color le gustaría? ' , ' Elija un color ' );
 $ iphoneSelect -> addItem ( ' White ' ) -> addItem ( ' Negro ' );

// Notebook seleccionar

$ notebookSelect = nueva caja de selección ( "¿Qué portátil le gustaría comprar? ' , ' Elegir un modelo de portátil ' );
 $ notebookSelect -> addItem ( ' Asus Zenbook ' , ' caseSelect ' )
			   -> addItem ( 'Macbook Air' , 'caseSelect' )
			   -> addItem ( "Acer Aspire ' , ' caseSelect ' )
			   -> addItem ( "Lenovo Thinkpad ' , ' caseSelect ' )
			   -> addItem ( "Dell Inspiron ' , ' caseSelect ' );

// Seleccionar la tableta

$ tabletSelect = nueva caja de selección ( "¿Qué tableta le gustaría comprar? ' , ' Pick a tablet ' );
 $ tabletSelect -> addItem ( ' Asus Transformer ' , ' caseSelect ' )
			 -> addItem ( 'Samsung Galaxy Tab' , 'caseSelect' )
			 -> addItem ( 'iPad 16GB' , 'caseSelect' )
			 -> addItem ( 'iPad 32GB' , 'caseSelect' )
			 -> addItem ( 'Acer Iconia Tab' , 'caseSelect' );

// Caso seleccionar

$ caseSelect = nueva caja de selección ( 'Comprar carcasa protectora?' , '' );
 $ caseSelect -> addItem ( "Sí" ) -> addItem ( "No" );

// Registrar todos los productos indicados en una matriz

$selects = array (
	 'productSelect' 			=> $productSelect ,
	 'phoneSelect' 			=> $phoneSelect ,
	 'smartphoneSelect' 		=> $smartphoneSelect ,
	 'featurephoneSelect' 	=> $featurephoneSelect ,
	 'iphoneSelect' 			=> $iphoneSelect ,
	 'notebookSelect' 		=> $notebookSelect ,
	 'tabletSelect' 			=> $tabletSelect ,
	 'caseSelect' 			=> $caseSelect 
);

El código anterior define una serie de artículos selectos y los coloca en el $ selecciona matriz. Cuando este script recibe una petición AJAX, que se verá en el array y devolver una respuesta:

ajax.php / 3

// Tenemos que observar esta matriz y devolver un objeto seleccionado en función 
// en el parámetro $ _GET [ 'clave'] pasado por jQuery

// Usted puede modificarlo para seleccionar los resultados de una base de datos en vez

si (array_key_exists ( $ _GET [ "llave" ], $ selecciona )) {
	header ( 'Content-type: application / json' );
	 echo  $ selecciona [ $ _GET [ "llave" ]] -> toJSON ();
}
otra cosa {
	cabecera ( "HTTP / 1.0 404 Not Found" );
	cabecera ( 'Estado: 404 Not Found' );
}

Llamando a la toJSON () método que se define en el principio, hemos de salida de todos los datos para el objeto seleccionado como JSON, listos para el uso de nuestra interfaz de jQuery.

Con este nuestro ejemplo AJAX Selecciona encadenado es completa!

Puede utilizar este ejemplo para guías de usuario avanzado, recomendaciones de productos o páginas de búsqueda. Actualización de la secuencia de comandos para utilizar una base de datos activa es sencillo y que en realidad va a simplificar el script PHP.

 


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

 

Related posts