web-dev-qa-db-ja.com

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

現在、在庫管理プロジェクトに取り組んでいます。 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）を取得し、動的な行に表示する必要があります。

javamysqljspnetbeans
8
Neal

データが返されている（stateChangedメソッドが呼び出されている）と想定して、DOMを変更してstateChangedメソッドにテーブル行（およびその内容、テキストボックス）を動的に作成する必要があります。

DOMを変更してテーブル構造を作成するには、コードは次のようになっている必要があります（以前に表示された行をすでに削除していると仮定します）。

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

また、@ TrueDubが言ったように、SQLをJSPに配置することは、多くの理由から悪いことです。さらに悪いのは、文字列を連結してSQLクエリを作成することです。特に、連結される文字列にブラウザでキャプチャされた文字列が含まれている場合、システムはSQLインジェクション攻撃にさらされます。

4
Nick Holt

特にJSP内にデータベースコードがあると、かなりの数の問題が発生しますが、特定の質問に答えるには、結果セットをリストに書き込み、このリストを特定のIDのリクエストスコープに設定する必要があります。次に、JSTLタグを使用してそれを反復処理し、{}表記を使用して出力を表示できます。

0
TrueDub