英文:
Display JSON data in table format with a submit button corresponding to each row
问题
/* 如何将JSON数据显示在JSP页面的表格中，每行都有一个提交按钮。单击提交按钮时，行数据应发送到一个servlet。
我已经使用Ajax从Servlet获取了JSON数据。
以下是从Servlet获取JSON数据的Ajax调用 */
function updateprofile(){
$.ajax({
url: 'abc/ConnectionInfo',
type: 'GET',
data: {},
dataType: 'json'
}).done(function(data){
renderProfiles(data);
}).fail(function(){
toaster.error("错误...");
});
}
function renderProfiles(data){
// 如何实现这个方法以表格格式显示所有数据，每行都有一个按钮。单击按钮时，它应发送配置文件ID到Servlet的POST方法。
}
英文:
/* How do I Display json data into a table in a JSP Page with a submit button in each row. On clicking submit button, Row data should be sent to a servlet.
I have fetched json data from a Servlet using Ajax.
Below is my ajax call to get JSON data from Servlet */
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.
}
答案1
得分: 0
你可以使用$.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>';
//循环遍历json数据
$.each(response, function(key, value) {
//获取值
var s = value['metric'];
//获取'['的索引
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>";
//添加数据
$("#table").html(str);
将上述jQuery代码放在你的function renderProfiles(data){..}中。另外，在<form></form>标签下，我添加了一个带有所需值的hidden输入字段，你需要在servlet的doPost方法中使用request.getParameter("data")获取该值。
英文:
You can use $.foreach loop to iterate your json data and show them in your table. Demo code(you need to do changes in below code as per your requirment) :
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
//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);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table"> </div>
<!-- end snippet -->
Put above code of jquery under your function renderProfiles(data){..}.Also,under <form></form> tag i have added a hidden input field with the required value that you need to send to your servlet .Get that value using request.getParameter("data") in doPost method of servlet.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论