Java 从数据库中检索数据并使用文本框将其动态显示在表的行中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9687625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Retrieve data from database and display it dynamically in the rows of the table using textboxes
提问by Neal
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）并将其显示在动态行中。
采纳答案by Nick Holt
Assuming that the data is being returned (your stateChangedmethod is being invoked) you need to dynamically create the table rows (and their contents, the text boxes) in your stateChangedmethod by modifying the DOM.
假设正在返回数据（stateChanged正在调用您的方法），您需要stateChanged通过修改 DOM在您的方法中动态创建表行（及其内容、文本框）。
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 注入攻击，尤其是当被连接的字符串包含在浏览器中捕获的字符串时。
回答by TrueDub
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 标记对其进行迭代，并使用 {} 表示法显示输出。
