motivación:
La función de consulta es el módulo funcional más común y utilizado que hemos visto en el sitio web. En el pasado, las consultas de información estaban conectadas a la base de datos y cada clic requería el soporte de la base de datos backend. Sin embargo, en muchos casos, los usuarios solo operan con una determinada parte de los datos, lo que no solo aumenta la carga sobre el servidor, sino que también afecta gravemente la velocidad de navegación del usuario.
En este caso, necesitamos pasar una cierta parte de los datos que el usuario necesita al cliente en forma de XML, para que el usuario pueda operar fácilmente con estos datos. No solo facilita a los usuarios, sino que también reduce la carga sobre la base de datos del servidor. ¡Por qué no! Y esta función se puede aplicar a muchos otros módulos, por lo que se ha agregado esta función de consulta dinámica.
Material:
La consulta dinámica del volumen XML tiene dos archivos: search.xml y search.xsl.
Las funciones son:
Filtre datos sin actualizar la página, mejorando efectivamente la función de consulta de datos.
Efecto:
Navegar aquí
Código:
buscar.xml
<?xml versión="1.0" codificación="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="search.xsl" ?>
<Idea Azul>
<equipo>
<blue_ID>1</blue_ID>
<blue_name>Vuelo en vela</blue_name>
<blue_text>Una consulta sencilla</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>Tema XML</blue_class>
</equipo>
<equipo>
<azul_ID>2</azul_ID>
<blue_name>pájaro volador</blue_name>
<blue_text>Casarse contigo te hará daño</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>Esencia de Riego</blue_class>
</equipo>
<equipo>
<azul_ID>3</azul_ID>
<blue_name>Kao Zi</blue_name>
<blue_text>Aplicación de expresiones regulares en el foro UBB</blue_text>
<blue_time>2001-11-23 21:02:16</blue_time>
<blue_class>Esencia de programación web</blue_class>
</equipo>
<equipo>
<blue_ID>4</blue_ID>
<blue_name>Tayilang</blue_name>
<blue_text>Manual completo del equipo de dirección clásico de fin de año v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>Zona de riego del foro</blue_class>
</equipo>
<equipo>
<azul_ID>5</azul_ID>
<nombre_azul>mmkk</nombre_azul>
<blue_text>Resumen del mensaje de error de Asp</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>javascript</blue_class>
</equipo>
</AzulIdea>
buscar.xsl
<?xml versión="1.0" codificación="gb2312" ?>
<xsl:hoja de estilo xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:coincidencia de plantilla="/">
<html>
<cabeza>
<title>Consejos prácticos XML (2): consulta dinámica</title>
<estilo>
cuerpo,BlueIdea,equipo,blue_ID,blue_name,blue_text,blue_time,blue_class{ fuente: 12px "宋体", "Arial", "Times New Roman" }
tabla {tamaño de fuente: 12px; borde: 0px doble; color de borde: #99CC99 #99CC99 #CCCCCC #CCCCCC; espacio entre celdas: 3; bgcolor:#eeeeee;
abarcar {tamaño de fuente: 12px; color: rojo}
</estilo>
<guión>
función texto de búsqueda (x)
{
hoja de estilo=documento.XSLDocumento;
fuente=documento.XMLDocumento;
sortField=document.XSLDocument.selectNodes(" //@select ");
si (x!="")
{
sortField[1].value="equipo[blue_ID='"+x+"']";
Layer1.innerHTML=source.documentElement.transformNode(hoja de estilo);
}
else {alert("¡Ingrese los criterios de filtro!");}
}
</script>
</cabeza>
<cuerpo>
<p align="center"><span>Consejos prácticos para el volumen XML (2): consulta dinámica</span></p>
<div id="Capa1" nombre="Capa1">
<xsl:apply-templates select="BlueIdea" />
</div>
<hora tamaño="1" ancho="500" />
<table align="center" cellpadding="0" cellspace="0" border="0" >
<tr>
<td>
<span>Ingrese los criterios de filtro: </span>
blue_ID= <tipo de entrada="texto" nombre="texto de búsqueda" tamaño="1" longitud máxima="1" />
<tipo de entrada="botón" clase="botón" onClick="texto de búsqueda(document.all.searchtext.value)" valor="Buscar" nombre="botón" />
</td>
</tr>
</tabla>
</cuerpo>
</html>
</xsl:plantilla>
<xsl: coincidencia de plantilla="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellpacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="centro">
<td>Número</td>
<td>Nombre</td>
<td>Tema</td>
<td>Hora de publicación</td>
<td>Clasificación</td>
</tr>
<xsl:apply-templates select="equipo" order-by="blue_ID"/>
</tabla>
</xsl:plantilla>
<xsl:partida de plantilla="equipo">
<tr align="centro">
<xsl:apply-templates select="blue_ID" />
<xsl:apply-templates select="nombre_azul" />
<xsl:aplicar-templates select="blue_text" />
<xsl:apply-templates select="blue_time" />
<xsl:apply-templates select="blue_class" />
</tr>
</xsl:plantilla>
<xsl: coincidencia de plantilla="blue_ID">
<td bgcolor="#eeeeee">
<xsl:valor-de />
</td>
</xsl:plantilla>
<xsl:template match="nombre_azul">
<td>
<xsl:valor-de />
</td>
</xsl:plantilla>
<xsl: coincidencia de plantilla="texto_azul">
<td>
<xsl:valor-de />
</td>
</xsl:plantilla>
<xsl:template match="blue_time">
<td>
<xsl:valor-de />
</td>
</xsl:plantilla>
<xsl:template match="blue_class">
<td>
<xsl:valor-de />
</td>
</xsl:plantilla>
</xsl:hoja de estilo>
explicar:
1) search.xml es un archivo de datos, creo que no habrá ningún problema para todos.
2) search.xsl es un archivo de formato, hay varias cosas a las que prestar atención.
(1) En el guión:
sortField=document.XSLDocument.selectNodes(" //@select ");
La función es: encontrar todos los nodos con el atributo select. Esto es lo que dije en la clasificación dinámica.
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
Algo es diferente. Preste atención a esta pequeña diferencia y sus respectivas funciones.
sortField[1].value="equipo[blue_ID='"+x+"']";
Por lo tanto sortField[1] es el segundo nodo encontrado y su nodo correspondiente es
<xsl:apply-templates select="team" order-by="blue_ID"/>
El parámetro x es el valor ingresado en el cuadro de texto.
Modificamos la condición de búsqueda de select="team" a select="team[blue_ID='x']"
La función es agregar una condición de juicio y solo se mostrarán los datos XML cuyo valor blue_ID sea igual a x.
Por supuesto, puede enriquecer las condiciones para el juicio. El juicio simple que hago aquí es para que todos lo entiendan más fácilmente.
Finalmente, el nuevo contenido ordenado se muestra volviendo a mostrar el valor HTML interno de Layer1.
(2) En el texto:
seleccione="equipo"
En mi caso es sortField[1], pero eso puede cambiar a medida que avanza.
Entonces debes calcular con precisión y no cometer errores, ¡de lo contrario encontrarás otra empresa!
Proporciono un método de uso común: en el código, puede usar un bucle para determinar si es el nodo que necesita.
Una cosa más:
XML tiene requisitos de casos extremadamente estrictos. Entonces, si tu escritura no está estandarizada, ¡se resfriará!
posdata:
Una vez que todos estén familiarizados con la idea de completar la clasificación dinámica y la consulta dinámica, descubrirán que nuestro método de implementación es realmente muy simple.
Simplemente modifique un valor determinado y luego muéstrelo nuevamente.
En la función de paginación dinámica, seguimos esta idea.