Como lo escribí antes, cuando completé esta demostración, descubrí que ahora todos ya no usan AJAX para completar el menú conjunto. De hecho, la demostración del autor no es para completar esto. La principal dirección de aprendizaje del autor es el desarrollo de la lógica comercial de los antecedentes de Javaweb. Sin embargo, cuando se trabaja en segundo plano, aún necesita comprender el front-end, especialmente la tecnología del envío de datos asíncronos, como AJAX, debe ser entendido y dominado. Así que aquí uso un menú concatenado para practicar la presentación asíncrona de Ajax, y luego escribiré varias demostraciones del formulario de envío asíncrono.
Los antecedentes del autor usan el marco Spring+SpringMVC. Esta parte no se explica aquí, el enfoque está en jQuery y Ajax.
Primero, descargue el recurso jQuery.js
Enlace del sitio web oficial de jQuery
Segundo, importe el jQuery.js descargado en el proyecto
En un proyecto Javaweb, simplemente colóquelo en WebContent (también puede crear su propia carpeta, pero no lo ponga en el archivo web-INF)
Tercero, comience a escribir código
Crear un nuevo archivo JSP
El código es el siguiente
<%@page import = "java.util.map"%> <%@page import = "java.util.list"%> <%@page lenguaje = "java" contentType = "text/html; charset = utf-8" pageCoding = "utf-8"%> < Transitional // en "" http://www.w3.org/tr/html4/loose.dtd"><html><head><meta http-equiv = "content-type" content = "text/html; al front-end desde el fondo. Se puede separar del tema AJAX, y no es necesario prestar demasiada atención-> <%list <map <string, object >> listMap = (list <map <string, object >>) request.getAttribute ("list"); %> <select id = "class" onChange = "getStudent (this.Value)"> <opción valor = "-1"> Seleccione clase </opción> <%para (int i = 0; i <listmap.size (); i ++) {map <string, object> map = listMap.get (i);%> <option> <%= map.get (class "). tostring () %> <!-Seleccione la clase primero, y luego la segunda opción de menú sincronizará los datos de la base de datos de fondo de forma asincrónica de acuerdo con el contenido seleccionado, configurando así las opciones del segundo menú-> </select> <!-Segundo menú, determine el nombre de acuerdo con la clase seleccionada-> <select ID = "Nombre"> <opción> Seleccione la clase primero </section> </section> </fuerte> <! INMARS JQUERY-IMPORT JQUERY-> SECTIVE <Script type. src = "jQuery/jQuery-3.1.1.min.js"> </script> <!-use Ajax en jQuery para realizar la sincronización asíncrona de la interfaz-> <script> // jQuery sintaxis estándar $ (documento) .ader (function () {// Escuchar la acción de cambio de la clase de control con la clase de identificación. Cuando el control seleccionado por este control, cambia, esto, este documento). function $ ("#class"). Change (function () {// Llame a Ajax $ .AJAX en jQuery ({// Establezca el método de envío, principalmente "Get" y "Post" Type: "P ost", // Establezca la URL enviada, solo puede seleccionar los locales aquí. Si necesita llamar a los recursos de otros dominios, busque en Google para resolver la URL del problema de intermedio: "Ajax.html? Classname ="+$ ("#class"). Val (), // Establezca el formato de la devolución de fondo, generalmente use JSON directamente. Esta oración no se puede perder. De lo contrario, cuando el fondo devuelve datos, el método de éxito no se llamará DataType: "JSON", // Cuando el fondo devuelve con éxito los datos, se llama al método. El parámetro de datos representa los datos JSON formateados por AJAX en jQuery (de hecho, necesitamos formatearlo manualmente en AJAX sin jQuery, y también escribí el método JS puro en el método de formateo de datos JSON en jQuery) Success: Función (datos) {// Borrar el control Seleccionar con el nombre de ID $ ("#Nombre"). Vacío (); // Opción $ ("#name"). Append ("<Opción> Seleccione Nombre </opción>"); // bucle a través de los datos completos (datos JSON) y agregue la opción $ .each (Data, function (i, n) {$ ("#name"). Append (" <option> "+data [i] .name+" </ppection> ");});});});});});}); </script> <!-El método de envío no usa la biblioteca jQuery (este se usa el código puro js, rara vez se usa, pero puede usarse para entender ajax) <!-type =" text/javaScript " Onchange al control Seleccionar para llamar a este método, y luego el valor seleccionado se almacenará automáticamente en esta función variable de nombre de nombre getStudent (classname) {if (classname! = "-1") {// use xmlhtttprequest método, este método realmente se usa en el jQuery anterior, pero ya hemos encapsulado la solicitud var. método. El último verdadero significa que usa la sumisión asíncrona, que puede omitirse. El valor predeterminado es truerequest.open ("post", "ajax.html? Classname ="+classname, true); // Enviar Ajax Solicitud de solicitud.send (); // Enviar Ajax Solicitud Solicitud.send (); // El estado de la solicitud es principalmente 0 1 2 3 4, pero en un lado solo escuchará 2 3 4, donde 4 indica una solicitud exitosa. que el siguiente paso se llevará a cabo solo si (request.readyState ==== 4) {// juzga que el código de retorno de la página web es 200 cuando está bien, proceda al siguiente paso if (request.status ==== 200) {// formatear el JSON JSON Data Var data = JSON.PARSE (request.ResponSextExt); // tranquility for (var i = 0; i <documento. i ++) {document.getElementById ("name"). remove (document.getElementById ("name"). Opciones [i]);} document.getElementById ("name"). ADD (nueva opción (datos [0] .name));}}}}}} </script>-> </html>Cuarto, el diagrama de efecto final
Lo anterior es el desarrollo de Javaweb que el editor le presentó. Uso de jQuery y AJAX para lograr efectos de menú de enlace dinámico. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!