web-dev-qa-db-fra.com

Récupérer des données de la base de données et les afficher dynamiquement dans les lignes du tableau à l'aide de zones de texte

Je travaille actuellement sur un projet de gestion d'inventaire. Je travaille avec JSP et MySQL sur la plate-forme Netbeans. Dans mon projet d'interrogation, j'ai besoin de récupérer des valeurs de la base de données et de les afficher dans une table. Les lignes à afficher doivent être dynamiques dans ma page. Ils devraient être affichés dans n'importe quel nombre. Supposons que lorsque je souhaite récupérer des valeurs en fonction d'un choix particulier que je sélectionne, je devrais être en mesure d'afficher toutes les données basées sur ce choix et de les afficher dans les lignes du tableau. Je ne parviens pas à l'afficher sur plusieurs lignes de ma table car j'utilise des zones de texte pour afficher les valeurs . Voici l'extrait de code:

<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 fonction getData () est la suivante:

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];
   }
}

L'extrait de code pour choice_retrieval.jsp est le suivant:

<%
    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);
    }
%>

La table de base de données utilisée ici est master_panel (choix_type varchar, val varchar, val_desc varchar). Je n'ai mis aucune contrainte pour l'instant. En fonction de la valeur choice_type, je dois extraire les données correspondantes (val et val_desc) de la base de données et les afficher sous forme de lignes dynamiques.

javamysqljspnetbeans
7
Neal

En supposant que les données soient renvoyées (votre méthode stateChanged est invoquée), vous devez créer de manière dynamique les lignes du tableau (et leur contenu, les zones de texte) dans votre méthode stateChanged en modifiant le DOM.

Pour modifier le DOM afin de créer la structure de la table, le code doit ressembler à ceci (en supposant que vous ayez déjà supprimé les lignes précédemment affichées):

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);
}

En outre, comme @TrueDub l'a dit, l'insertion de SQL dans les fichiers JSP est mauvaise pour de nombreuses raisons. Pire, la construction de requêtes SQL avec concaténation de chaînes ouvre votre système aux attaques par injection SQL, en particulier lorsque la chaîne concaténée comprend une chaîne capturée dans le navigateur.

4
Nick Holt

Vous faites pas mal de choses, notamment en ayant un code de base de données dans un JSP, mais pour répondre à votre question spécifique, vous devez écrire votre jeu de résultats dans une liste et définir cette liste dans la portée de la demande avec un ID spécifique. Vous pouvez ensuite le parcourir à l'aide de la balise JSTL et afficher le résultat à l'aide de la notation {}.

0
TrueDub