用jqurey写一个ajax异步请求servlet类req,并把返回的JSON数据以表格呈现的函数
时间: 2023-03-04 20:36:05 浏览: 120
以下是使用jQuery编写的将返回的JSON数据呈现为表格的函数:
```javascript
function displayData() {
$.ajax({
url: 'req',
type: 'GET',
dataType: 'json',
success: function(data) {
var table = $('<table>').addClass('table');
var headerRow = $('<tr>');
$.each(data[0], function(key, value) {
headerRow.append($('<th>').text(key));
});
table.append($('<thead>').append(headerRow));
var tbody = $('<tbody>');
$.each(data, function(index, object) {
var row = $('<tr>');
$.each(object, function(key, value) {
row.append($('<td>').text(value));
});
tbody.append(row);
});
table.append(tbody);
$('#data-table').html(table);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('Error: ' + textStatus + ' - ' + errorThrown);
}
});
}
```
这个函数将使用`$.ajax`函数发起GET请求到`servlet`类的URL(假设为`req`),并将返回的JSON数据解析为JavaScript对象。成功的响应将在`success`回调函数中处理,其中将构建一个表格并将其添加到页面上具有`id="data-table"`的元素中。如果请求失败,则会调用`error`回调函数以提供一些错误信息。
要调用此函数,只需在页面上放置一个具有`id="data-table"`的元素,然后在需要时调用`displayData`函数即可。
阅读全文