从数据库中检索数据并使用文本框在表的行中动态显示它

I'm currently working on an Inventory Management project. I m working with JSP and MySQL on Netbeans Platform. In my project on querying I need to retrieve values from the database and display it in a table. The rows to be displayed should be dynamic in my page. They should be displayed in any number. Suppose When I want to retrieve values based on a particular choice I select, I should be able to display all the data based on the choice and display it in the rows of the table. I am not able to display it in multiple rows of my table because I m using text boxes to display the values. Here is the code snippet:

我目前正在开展库存管理项目。我在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();"/>

The getData() function is as follows:

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

The Code snippet for choice_retrieval.jsp is as follows:

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

Database table used here is master_panel(choice_type varchar,val varchar,val_desc varchar). I have not put any constraints as of now. Based on the choice_type value I need to retrieve the corresponding data(val and val_desc) from the database and display it in dynamic rows.

这里使用的数据库表是master_panel(choice_type varchar,val varchar,val_desc varchar)。到目前为止我还没有任何限制。基于choice_type值,我需要从数据库中检索相应的数据(val和val_desc)并将其显示在动态行中。

2 个解决方案

#1

Assuming that the data is being returned (your stateChanged method is being invoked) you need to dynamically create the table rows (and their contents, the text boxes) in your stateChanged method by modifying the DOM.

假设正在返回数据(正在调用stateChanged方法),您需要通过修改DOM在stateChanged方法中动态创建表行(及其内容,文本框)。

To modify the DOM to create the table structure the code should read something like this (assuming you've already removed the previously displayed rows):

要修改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);
}

Also, as @TrueDub said, putting SQL in JSPs is bad for a whole host of reasons. What's worse is building SQL queries with string concatenation - it opens your system to SQL injection attacks, especially when the string being concatenated includes a string captured in the browser.

另外,正如@TrueDub所说,将SQL放入JSP中是有害的,原因很多。更糟糕的是使用字符串连接构建SQL查询 - 它会使系统打开SQL注入攻击,尤其是当连接的字符串包含在浏览器中捕获的字符串时。

#2

You're doing quite a few things wrong there, especially having database code within a JSP, but to answer your specific question, you should write your resultset into a list and set this list into the request scope with a specific id. You can then iterate over it using the JSTL tag and display the output using the {} notation.

你在那里做了很多错事,特别是在JSP中有数据库代码,但是为了回答你的具体问题,你应该将结果集写入一个列表,并将这个列表设置为具有特定id的请求范围。然后,您可以使用JSTL标记对其进行迭代,并使用{}表示法显示输出。