【jQuery】ajax异步请求实现动态加载表格

SpringBoot的一个短链接项目,把后端传输过来的list集合通过ajax异步请求渲染到前端

前端

<table id="url_table" class="table table-bordered no-footer dataTable">
    <thead>
        <tr>
            <th>Original Url</th>
            <th>Shorten Url</th>
            <th>Visits</th>
            <th>Last visited time</th>
        </tr>
    </thead>
    <tbody >
    </tbody>
</table>

js(核心部分)

<script>
    $(function (){
        $.ajax({
            method:"GET",
            url:"/show",
            success:function (res){
                $.each(res,function (k,v){
                    $("#url_table tbody").append("<tr>"+
                                                 "<td>"+ v.longUrl +"</td>" +
                                                 "<td>"+ v.shortUrl +"</td>" +
                                                 "<td>"+ v.visits +"</td>" +
                                                 "<td>"+ v.lastVisitedTime +"</td>" +
                                                 "</tr>"
                                                )
                })
            }
        })
   })
})
</script>

controller

@GetMapping("/show")
@ResponseBody
public List<WholeUrl> record(HttpServletRequest req,HttpSession session){
    List<WholeUrl> list = new ArrayList<>();

    User user = (User) session.getAttribute("user");
    List<Url> urlList = service.selectByUserId(user.getId());

    //根据后缀拼接
    for (Url url : urlList) {

        String shortUrl = "";
        if (req.getServerPort() == 80 || req.getServerPort() == 443) {
            shortUrl = String.format("%s://%s/%s/%s",
                                     req.getScheme(), req.getServerName(), user.getPrefix(), url.getSuffix());
        } else {
            shortUrl = String.format("%s://%s:%s/%s/%s",
                                     req.getScheme(), req.getServerName(), req.getServerPort(), user.getPrefix(), url.getSuffix());
        }
        //封装为对象
        WholeUrl wholeUrl = new WholeUrl();
        wholeUrl.setUsername(user.getUsername());
        wholeUrl.setLongUrl(url.getLongUrl());
        wholeUrl.setShortUrl(shortUrl);
        wholeUrl.setVisits(url.getVisits());
        wholeUrl.setLastVisitedTime(url.getLastVisitedTime());
        list.add(wholeUrl);

    }
    return list;
}

效果

image-20221123231343801

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Steph Wae

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

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

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

打赏作者

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

抵扣说明:

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

余额充值