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

Question

/* 如何将 json 数据显示到 JSP 页面中的表格中，每行都有一个提交按钮。单击提交按钮时，应将行数据发送到 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 数据并将它们显示在您的表格中。演示代码（您需要根据您的要求对以下代码进行更改）：

//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的所需值。使用request.getParameter("data")获取该值在doPost servlet 方法中。