Recupera i dati dal database e li visualizza dinamicamente nelle righe della tabella utilizzando le caselle di testo

Question

Attualmente sto lavorando a un progetto di gestione inventario. Sto lavorando con JSP e MySQL su Netbeans Platform. Nel mio progetto sull'interrogazione ho bisogno di recuperare i valori dal database e visualizzarli in una tabella. Le righe da visualizzare dovrebbero essere dinamiche nella mia pagina. Dovrebbero essere visualizzati in qualsiasi numero. Supponiamo che quando desidero recuperare i valori in base ad una particolare scelta che seleziono, dovrei essere in grado di visualizzare tutti i dati in base alla scelta e visualizzarli nelle righe della tabella. Non riesco a visualizzarlo in più file del mio tavolo perché sto usando le caselle di testo per visualizzare i valori. Ecco il frammento di codice:

<table> 
    <tr> 
     <td> 
      <select name="choice_type"> 
      <option>select</option> 
      <option value="part_type">part_type</option> 
      <option value="category">category</option> 
      <option value="names">names</option> 
      </select>  
     </td> 
    </tr> 
    <tr> 
     <th>VAL</th> 
     <th>VAL DESC</th> 
    </tr> 
    <tr> 
     <td> <input type="text" name="val" id="val" size="15" /></td> 
     <td> <input type="text" name="val_desc" id="val_desc" size="15" /></td> 
    </tr> 
</table> 

<input type="submit" name="Query" value="Query" onClick="getData();"/> 

La funzione getData() è la seguente:

function getData(){ 
    xmlHttp=GetXmlHttpObject() 
    var id=document.getElementById("choice_type").value; 
    var url="choice_retrieval.jsp";//The code for this file is defined below 
    url=url+"?choice_type="+id; 
    xmlHttp.onreadystatechange=stateChanged 
    xmlHttp.open("GET",url,true) 
    xmlHttp.send(null); 
} 

function stateChanged(){ 
    if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 
    var showdata = xmlHttp.responseText; 
    var strar = showdata.split(":"); 
    if(strar.length>1){ 
    var strname = strar[1]; 
    document.getElementById("val").value= strar[1]; 
    document.getElementById("val_desc").value= strar[2]; 
    } 
} 

Il frammento di codice per choice_retrieval.jsp è la seguente: tavolo

<% 
    String ch = request.getParameter("choice_type").toString(); 
    System.out.println(ch); 
    String data =""; 
    try{ 
     Class.forName("com.mysql.jdbc.Driver"); 
     Connection con = DriverManager.getConnection("jdbc:mysql://", "", ""); 
     Statement st=con.createStatement(); 
     ResultSet rs=st.executeQuery("select * from master_panel where choice_type='"+ch+"'"); 
     while(rs.next()) 
     { 
      data = ":" + rs.getString("val") + ": " + rs.getString("val_desc"); 
     } 
     out.println(data); 
     System.out.println(data); 
    } 
    catch(Exception e) { 
     System.out.println(e); 
    } 
%> 

Database usato qui è master_panel (choice_type varchar, val varchar, val_desc varchar). Non ho messo alcun vincolo al momento. Sulla base del valore choice_type ho bisogno di recuperare i dati corrispondenti (val e val_desc) dal database e visualizzarli in righe dinamiche.

Answer 1

Supponendo che i dati vengano restituiti (viene invocato il metodo stateChanged) è necessario creare dinamicamente le righe della tabella (e il loro contenuto, le caselle di testo) nel metodo stateChanged modificando il DOM.

Per modificare il DOM per creare la struttura della tabella il codice dovrebbe leggere qualcosa come questo (supponendo che hai già rimosso le righe precedentemente visualizzato):

var table = document.getElementById('tableId'); 
var data = xmlHttp.responseText.split(":"); 

for (int i = 0; i < data.length; i + 2) 
{ 
    var valueText = document.createElement('input'); 
    valueText.type = 'text'; 
    valueText.name = 'value' + i; 
    valueText.value = data[i]; 

    var valueCell = document.createElement('td'); 
    valueCell.appendChild(valueText); 

    var descriptionText = document.createElement('input'); 
    descriptionText.type = 'text'; 
    descriptionText.name = 'value' + i; 
    descriptionText.value = data[i + 1]; 

    var descriptionCell = document.createElement('td'); 
    descriptionCell.appendChild(descriptionText); 

    var tableRow = document.createElement('tr'); 
    tableRow.appendChild(valueCell); 
    tableRow.appendChild(descriptionCell); 

    table.tBodies[0].appendChild(tableRow); 
} 

Inoltre, come ha detto @TrueDub, mettendo in SQL Le JSP sono dannose per tutta una serie di motivi. Quel che è peggio è costruire query SQL con concatenazione di stringhe: apre il tuo sistema agli attacchi di SQL injection, specialmente quando la stringa concatenata include una stringa catturata nel browser.

Answer 2

Stai facendo un bel po 'di cose sbagliate, specialmente avendo un codice di database all'interno di un JSP, ma per rispondere alla tua domanda specifica, dovresti scrivere il tuo gruppo di risultati in un elenco e impostare questo elenco nello scope di richiesta con un ID specifico . È quindi possibile eseguire iterazioni su di esso utilizzando il tag JSTL e visualizzare l'output utilizzando la notazione {}.