使用javascript从数据库检索多行并显示在html表中_Javascript_Jquery_Jsp

使用javascript从数据库检索多行并显示在html表中

javascript jquery jsp

使用javascript从数据库检索多行并显示在html表中,javascript,jquery,jsp,Javascript,Jquery,Jsp,我试图使用javascript在html表中显示数据库值，但只得到数据库表中的最后一个值 function productValues() { if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ var responseJson= JSON.parse(xmlHttp.responseText); var length=responseJson.a1.length; document.getElem

我试图使用javascript在html表中显示数据库值，但只得到数据库表中的最后一个值

function productValues() {
  if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
    var responseJson= JSON.parse(xmlHttp.responseText);
    var length=responseJson.a1.length;
    document.getElementById("nid").value="";
    document.getElementById("pid").value="";
    document.getElementById("cid").value="";
    document.getElementById("name").value="";
    document.getElementById("price").value="";
    for(i=0;i<length;i++){
      var a=responseJson.a1[i];
      var b=responseJson.a2[i];
      var c=responseJson.a3[i];
      var d=responseJson.a4[i];
      var e=responseJson.a5[i];
      document.getElementById("nid").value=a;
      document.getElementById("pid").value=b;
      document.getElementById("cid").value=c;
      document.getElementById("name").value=d;
      document.getElementById("price").value=e;
    }
  }
}

//html代码

</head>
<form id="form1"  method="post" action="ProductNameSearchF">



                            <table  align="center">   
                                <tr>
                                    <td><font color="#006400"><b> Select Item:</b></font>
                                        <input type="text" name="searchname"  id="user" onclick="clearFields()"/>
<input type="button" id="submit" style=" color:#280000 ;font-size: medium;" value="Edit" onclick="getDetails();" />

<tr>

<br/></td></tr>

<div id="welcometext" align="center">
</div>
                            </table>

<TABLE cellpadding="8"  id ="table" border="1" align="center" style="background-color: #EEEEEE;">


<TR bgcolor="#66CCFF"><font color="#fff">
<TD color="#0080FF" width="0.1%" ><B>Id</B></TD>
<TD color="#0080FF" width="0.5%"><B>ProductType_Id</B></TD>
<TD width="0.1%"><B>Cuisine_Id</B></TD></font>
<TD width="0.5%"><B>Name</B></TD></font>
<TD width="0.5%"><B>Price</B></TD></font>
</TR>


<TR>
  <TD><input type="text"  name="id" id="nid"  style="background-color:transparent; color:blue; " readonly   ></TD>
<TD><input type="text"  name="productid" id="pid"  style="background-color:transparent; color:red; " ></TD>

<TD><b><input type="text"  name="cuisineid" id="cid" style="background-color:transparent; color:red; "   ></b></TD>
<TD><b><input type="text"  name="name" id="name" style="background-color:transparent; color:red; "></b></TD>
<TD><b><input type="text"  name="price" id="price" style="background-color:transparent; color:red;" ></b></TD></input>
</TR>




</font>
<font size="+3" color="red"></b>



</font>

<TR>

</tr>
</TABLE>

<table align="center">
    <tr>
     <td colspan="">  <a href="SearchFirstNameClear.jsp" style="text-color: #ffffcc;"><img src="clear.jpg" width="50" height="30" ></img></a> <button type="submit"  name="someName" value="someValue"><img src="redsubmit.png" width="70" height="30" ></button>  </td>
    </tr>
</table>
</table>



</form>


选择项目：


身份证件
ProductType\u Id
烹饪
名称
价格

这是我的html代码，我只添加html页面的Essential代码

@user3825041:在html元素中，id a本质上是唯一的。我的意思是，如果我们使用不同的值重复设置相同的ID，那么最终将更新单个值（即最后一个值）。因此，您只能获得最后一个值。请尝试在每次行更新时更改ID

或者你也可以使用html表格插件，比如bootstrap表格，它们使用起来很简单，而且响应速度也很快。您只需要向这些插件提供数据（JSON/XML格式）

您可以从javascript动态生成表，要实现它，您的（servlet）响应应该如下所示：

ArrayList<ProductSearch> al = new ArrayList<ProductSearch>();

... databse code ...

while(rs.next()) {
    ProductSearch prod=new ProductSearch();
    prod.setA1(a1);
    prod.setA2(a2);
    prod.setA3(a3);
    prod.setA4(a4);
    prod.setA5(a5);

    al.add(prod);
}
...
String responseJson = new Gson().toJson(al);
response.getWriter().println(responseJson);

<input type="button" value="Show Results" onclick="showTable()" />
<div id="dvTable"></div>

<script type="text/javascript">
    function showTable() {
            if (xmlHttp.readyState == 4) {  
                var responseJson = JSON.parse(xmlHttp.responseText);
                var table = document.createElement("TABLE");
                table.border = "1";

                var row = table.insertRow(-1);

                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "nid";
                row.appendChild(headerCell);
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "pid";
                row.appendChild(headerCell);
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "cid";
                row.appendChild(headerCell);
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "name";
                row.appendChild(headerCell);
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "price";
                row.appendChild(headerCell);

                for (var i = 0; i < responseJson.length; i++) {
                    row = table.insertRow(-1); //creates new row
                    row.id = "row1"; // if you want to set id of row
                    var cell = row.insertCell(-1); // creates new column
                    cell.innerHTML = responseJson[i].a1; // put data in column
                    cell.id = "column1"; // if you want to set id of column
                    var cell = row.insertCell(-1);
                    cell.innerHTML = responseJson[i].a2;
                    var cell = row.insertCell(-1);
                    cell.innerHTML = responseJson[i].a3;
                    var cell = row.insertCell(-1);
                    cell.innerHTML = responseJson[i].a4;
                    var cell = row.insertCell(-1);
                    cell.innerHTML = responseJson[i].a5;
                }

                var dvTable = document.getElementById("dvTable");
                dvTable.innerHTML = "";
                dvTable.appendChild(table);
            }     
    }
</script>

ArrayList al=new ArrayList（）；
... 数据库代码。。。
while（rs.next（））{
ProductSearch prod=新产品搜索（）；
产品组a1（a1）；
产品组a2（a2）；
产品组a3（a3）；
产品设置a4（a4）；
产品设定a5（a5）；
新增（产品）；
}
...
字符串responseJson=new Gson（）.toJson（al）；
response.getWriter（）.println（responseJson）；

您的html应该如下所示：

ArrayList<ProductSearch> al = new ArrayList<ProductSearch>();

... databse code ...

while(rs.next()) {
    ProductSearch prod=new ProductSearch();
    prod.setA1(a1);
    prod.setA2(a2);
    prod.setA3(a3);
    prod.setA4(a4);
    prod.setA5(a5);

    al.add(prod);
}
...
String responseJson = new Gson().toJson(al);
response.getWriter().println(responseJson);

<input type="button" value="Show Results" onclick="showTable()" />
<div id="dvTable"></div>

<script type="text/javascript">
    function showTable() {
            if (xmlHttp.readyState == 4) {  
                var responseJson = JSON.parse(xmlHttp.responseText);
                var table = document.createElement("TABLE");
                table.border = "1";

                var row = table.insertRow(-1);

                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "nid";
                row.appendChild(headerCell);
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "pid";
                row.appendChild(headerCell);
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "cid";
                row.appendChild(headerCell);
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "name";
                row.appendChild(headerCell);
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = "price";
                row.appendChild(headerCell);

                for (var i = 0; i < responseJson.length; i++) {
                    row = table.insertRow(-1); //creates new row
                    row.id = "row1"; // if you want to set id of row
                    var cell = row.insertCell(-1); // creates new column
                    cell.innerHTML = responseJson[i].a1; // put data in column
                    cell.id = "column1"; // if you want to set id of column
                    var cell = row.insertCell(-1);
                    cell.innerHTML = responseJson[i].a2;
                    var cell = row.insertCell(-1);
                    cell.innerHTML = responseJson[i].a3;
                    var cell = row.insertCell(-1);
                    cell.innerHTML = responseJson[i].a4;
                    var cell = row.insertCell(-1);
                    cell.innerHTML = responseJson[i].a5;
                }

                var dvTable = document.getElementById("dvTable");
                dvTable.innerHTML = "";
                dvTable.appendChild(table);
            }     
    }
</script>


函数showTable（）{
如果（xmlHttp.readyState==4）{
var responseJson=JSON.parse（xmlHttp.responseText）；
var table=document.createElement（“表”）；
table.border=“1”；
var行=table.insertRow（-1）；
var headerCell=document.createElement（“TH”）；
headerCell.innerHTML=“nid”；
行。追加子行（headerCell）；
var headerCell=document.createElement（“TH”）；
headerCell.innerHTML=“pid”；
行。追加子行（headerCell）；
var headerCell=document.createElement（“TH”）；
headerCell.innerHTML=“cid”；
行。追加子行（headerCell）；
var headerCell=document.createElement（“TH”）；
headerCell.innerHTML=“name”；
行。追加子行（headerCell）；
var headerCell=document.createElement（“TH”）；
headerCell.innerHTML=“价格”；
行。追加子行（headerCell）；
对于（变量i=0；i

能否发布您的回复格式？ProductSearch prod=new ProductSearch（）；产品组a1（a1）；产品组a2（a2）；产品组a3（a3）；产品设置a4（a4）；产品设定a5（a5）；字符串responseJson=new Gson（）.toJson（prod）；您可以编辑原始帖子以包含一个示例JSON对象吗？@user3825041将您的值设置为for循环中的ID，这将重置您的值。这就是为什么在html页面中只获取最后一行值的原因，是否可以包含html表？