Popolamento di elenchi a discesa a cascata in JSP / Servlet

Supponiamo che abbia tre controlli dropdownlist chiamati dd1 , dd2 e dd3 . Il valore di ogni elenco a discesa proviene dal database. Il valore di dd2 dipende dal valore di dd2 e il valore di dd1 dipende dal valore di dd1 . Qualcuno può dirmi come posso chiamare servlet per questo problema?

Esistono fondamentalmente tre modi per ottenere ciò:

  1. Invia modulo a un servlet durante l’evento onchange del 1 ° menu a discesa (puoi utilizzare Javascript per questo), lascia che il servlet ottenga l’elemento selezionato del 1 ° menu a discesa come parametro di richiesta, consenti di ottenere i valori associati del secondo menu a discesa dal database come una Map , lascia che le memorizzi nell’ambito della richiesta. Infine lascia che JSP / JSTL mostri i valori nel secondo menu a discesa. È ansible utilizzare JSTL (è sufficiente rilasciare jstl-1.2.jar in /WEB-INF/lib ) c:forEach per il tag c:forEach per questo. È ansible eseguire il prepopolamento del primo elenco nel metodo doGet() del doGet() associato alla pagina JSP.

        

    Tuttavia, una volta avvertito che questo invierà l’ intero modulo e causerà un “flash di contenuto” che potrebbe essere negativo per l’esperienza utente. Dovrai inoltre conservare gli altri campi nello stesso modulo in base ai parametri della richiesta. È inoltre necessario determinare nel servlet se la richiesta deve aggiornare un elenco a discesa (il valore di discesa figlio è null) o inviare il modulo effettivo.

  2. Stampa tutti i valori possibili del 2 ° e 3 ° dropdown come object Javascript e utilizza una funzione Javascript per riempire il secondo menu a discesa in base alla voce selezionata del 1 ° menu a discesa durante l’evento onchange del 1 ° menu a discesa. Nessun modulo di invio e nessun ciclo del server è necessario qui.

         

    Un avvertimento tuttavia è che questo può diventare inutilmente lungo e costoso quando si hanno molti articoli. Immagina di avere 3 passaggi per ogni 100 articoli possibili, che significherebbe 100 * 100 * 100 = 1.000.000 di oggetti in JS. La pagina HTML crescerà di oltre 1 MB di lunghezza.

  3. Utilizzare XMLHttpRequest in Javascript per triggersre una richiesta asincrona a un servlet durante l’evento onchange del 1 ° elenco a discesa, lasciare che il servlet ottenga l’elemento selezionato del 1 ° elenco a discesa come parametro di richiesta, consenta di ottenere i valori associati del secondo elenco a discesa dal database, restituirlo come stringa XML o JSON . Infine lascia che Javascript visualizzi i valori nel secondo elenco a discesa tramite l’albero DOM HTML (il metodo Ajax, come suggerito prima). Il modo migliore per farlo sarebbe usare jQuery .

     <%@ page pageEncoding="UTF-8" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    SO question 2263996     

    ..dove il Servlet behind /json/options può assomigliare a questo:

     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String dd = request.getParameter("dd"); // ID of child DD to fill options for. String val = request.getParameter("val"); // Value of parent DD to find associated child DD options for. Map options = optionDAO.find(dd, val); String json = new Gson().toJson(options); response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); response.getWriter().write(json); } 

    Qui, Gson è Google Gson che facilita la conversione di oggetti Java completi in JSON e viceversa. Vedi anche Come usare servlet e Ajax?

A giudicare dalla tua domanda, non stai davvero usando un framework web ma usando servlet per il rendering di html.

Sarò gentile e dirò che sei circa un decennio indietro nei tempi :), le persone usano JSP (e un framework web come struts) per questo genere di cose. Tuttavia, detto questo, ecco qui:

  1. Crea un campo nascosto nel modulo e imposta il valore su “1”, “2” o “3” a seconda di quale menu a discesa deve essere compilato;
  2. Nel tuo servlet, acquisisci questo valore (request.getParamter ()) e usalo come ‘caso’ / if / else per restituire i valori dropdown appropriati.

Lo dirò di nuovo, basta usare un framework web o almeno un vecchio jsp per farlo.

Potresti aver bisogno di più servlet per questo.

Servlet 1: carica i valori per il primo elenco a discesa dal database. Nella pagina JSP, build l’elenco a discesa. Sull’utente che seleziona un valore invia al servlet due.

Servlet 2: recupera il valore dal primo elenco ed esegue la ricerca nel database per i valori del secondo elenco. Costruisci la seconda lista. Quando l’utente seleziona il secondo valore, lo invia al servlet 3.

Servlet 3: recupera il valore selezionato nel secondo menu a discesa ed esegue la ricerca nel database per ottenere i valori dell’ultima discesa.

Si consiglia di considerare AJAX per rendere il popolamento degli elenchi in modo trasparente agli utenti. jQuery ha alcuni plugin molto carini per renderlo abbastanza facile se si è disposti a farlo.


  

È ansible scrivere JavaScript che invia il modulo nell’evento onchange. Di nuovo, se usi una libreria esistente come jQuery sarà 10 volte più semplice.

E ‘stata una soluzione semplice e fantastica. Mi piace quanto sia piccolo il codice JQuery e apprezzo molto il link all’API GSON. Tutti gli esempi hanno reso questa implementazione facile.

Aveva un problema nella creazione dell’URL del server JSON con il riferimento al SELECT genitore (es. $(this).val() ) [necessario per specificare l’attributo :selected ]. Ho modificato leggermente lo script per includere gli aggiornamenti suggeriti. Grazie per il codice iniziale.