ajax请求接口里的数据,然后append显示在页面里

ajax请求接口里的数据,然后append显示在页面里

$.ajax({  
url:"这里是你要请求的地址",  
data:{"id":id}, //以键/值对的形式  
async : false,  
dataType : "json",  
success : function(data) {  
for(int i = 0; i < data.length; i++) { //循环后台传过来的Json数组  
     var datas = data[i];  
     $("#id").append("<p>"+datas.email+"</p>")
}  
}  
});
可以参考以下步骤: 1. 在jsp页面中引入jQuery库和bootstrap库(用于表格的渲染): ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> ``` 2. 在jsp页面中创建一个表格: ```html <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> </tbody> </table> ``` 3. 在jsp页面中使用ajax请求后端接口: ```js $.ajax({ url: 'api/user', // 后端接口地址 type: 'GET', // 请求方法 dataType: 'json', // 返回数据类型 success: function(data) { // 请求成功的回调函数 var tbody = $('tbody'); // 获取表格的tbody元素 for (var i = 0; i < data.length; i++) { // 遍历返回的数据 var tr = $('<tr>'); // 创建一个tr元素 tr.append($('<td>').text(data[i].id)); // 在tr中添加td元素,并设置td中的文本 tr.append($('<td>').text(data[i].name)); tr.append($('<td>').text(data[i].age)); tr.append($('<td>').text(data[i].gender)); tbody.append(tr); // 将tr添加到表格中 } }, error: function() { // 请求失败的回调函数 alert('请求失败!'); } }); ``` 4. 后端接口需要返回一个json格式的数据,参考以下示例: ```java @RequestMapping(value = "/api/user", method = RequestMethod.GET) @ResponseBody public List<User> getUserList() { List<User> userList = userService.getUserList(); return userList; } ``` 其中,User为一个JavaBean,包含id、name、age、gender等属性。 以上就是jsp中ajax请求后端接口并进行表格渲染的步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

linlinlove2

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值