以 table 格式显示 JSON 数据，每行对应一个提交按钮

Question

/* 如何将 json 数据显示到 JSP 页面的 table 中，每行都有一个提交按钮。单击提交按钮时，行数据应发送到 servlet。

我已经使用 Ajax 从 Servlet 获取了 json 数据。

下面是我从 Servlet 获取 JSON 数据的 ajax 调用 */

function updateprofile(){
$.ajax({
url : 'abc/ConnectionInfo',
type: 'GET',
data: {},
data type: 'json'
}).done(function (data){
     renderProfiles(data);
}).fail(function (){
toaster.error("Eror...");
});
}

function 
renderProfiles(data){

//How can I implement this 
method to display all the 
data in table format with a 
button corresponding to 
each row.  And on clicking 
of the button it should 
send a profile ID to 
Servlet Post method.
}

Answer 1

您可以使用 $.foreach 循环来迭代您的 json 数据并将它们显示在您的 table 中。演示代码（您需要根据您的要求对以下代码进行更改）：

//your json data
var response = [{
    "metric": "connected[qa_KCDz->Exre]"
  },
  {
    "metric": "connected[qa_KTDz->Exre]"
  },
  {
    "metric": "connected[qa_KPDz->Exre]"
  }
];

var str = '<table border=1><tr>\n' +
  '<th>Something</th>\n' +
  '<th>Submit</th>\n' +
  '</tr>';
  //looping through json data
$.each(response, function(key, value) {
  //get value
  var s = value['metric'];
  //getting index of [
  var i = s.indexOf('[');
  var data = s.slice(10, i + 8).trim();

  str += '<td>' + value['metric'] + '</td>';
  str += '<td> <form method="post" action="servletname"><input type="hidden" name="data" value=' + data + ' ><input type="submit" value ="send" ></form></td></tr>';


});
str += "</table>";

//appending data
$("#table").html(str);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table"> </div>

将上面的 jquery 代码放在 function renderProfiles(data){..} 下。此外，在 <form></form> 标签下，我添加了一个 hidden 输入字段，其中包含您需要的所需值发送到您的 servlet。在 servlet 的 doPost 方法中使用 request.getParameter("data") 获取该值。

以 table 格式显示 JSON 数据，每行对应一个提交按钮

Display JSON data in table format with a submit button corresponding to each row

java

json

jsp

servlets