データベースからデータを取得し、テキストボックスを使用してテーブルの行に動的に表示

Question

現在、在庫管理プロジェクトを進めています。私はNetbeansプラットフォーム上でJSPとMySQLを使って作業しています。クエリに関する私のプロジェクトでは、データベースから値を取り出してテーブルに表示する必要があります。私のページでは、表示される行が動的である必要があります。それらは任意の数で表示する必要があります。私が選択した特定の選択肢に基づいて値を取り出す場合、選択肢に基づいてすべてのデータを表示し、それを表の行に表示できるはずです。テキストボックスを使って値を表示しているので、テーブルの複数の行に表示することができません。ここ は、コードスニペットである：

<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();"/> 

以下の通りのgetData（）関数がある：

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

次のようにchoice_retrieval.jspためのコードスニペットは：

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

データベーステーブルここではmaster_panel（choice_type varchar、val varchar、val_desc varchar）を使用します。私は今のところ制約を置いていません。 choice_typeの値に基づいて、データベースから対応するデータ（valとval_desc）を取得し、それを動的行に表示する必要があります。

Answer 1

データが返されている（stateChangedメソッドが呼び出されている）と仮定すると、stateChangedメソッドでテーブル行（およびその内容、テキストボックス）を動的に作成する必要があります。でSQLを入れ、@TrueDubが言ったように、

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

また：

コードはこのような何かをお読みくださいテーブル構造を作成するためのDOMを変更するには（あなたはすでに以前に表示された行を削除したと仮定した場合） JSPはさまざまな理由で悪いことです。さらに悪いのは、文字列連結でSQLクエリを構築することです。特に、連結された文字列にブラウザで取得された文字列が含まれている場合は、システムをSQLインジェクション攻撃に開放します。

Answer 2

特に、JSP内にデータベースコードを入れておきながら、あなたの特定の質問に答えるためには、結果セットをリストに書き込み、このリストを特定のIDを持つリクエストスコープに設定する必要があります。その後、JSTLタグを使用して反復処理を行い、{}表記を使用して出力を表示できます。