将从数据库取到图片的url 在前台循环遍历显示图片

数据怎么取的这里就不说了,从controller开始写

@Controller
@RequestMapping("/Admin")
public class AdminController {
    @Autowired
    AdminServic adminServic;

    @ResponseBody
@RequestMapping("/index1")
    Map<String, Object> selectimg (){
        Map<String, Object> map = new HashMap<>(); //创建一个空的map 用于返回
        List<USERS> list = adminServic.selectAdmin(); // 接受到数据
        //map = list.stream().collect(Collectors.toMap(USERS::getID,USERS::getPwd)); //使用stream()方法将list里面的ID Pwd 以键值对放到map
        map.put("list" ,list);
        System.out.println(map);
        return map;
    }
    }

这是我的数据库截图
在这里插入图片描述
html 页面

<div class="footer" id="test1">
    <ul id="test"></ul>
</div>
<script>
    $.ajax({
        url:'/Admin/index1',
        type:'post',
        success:function(json){
           var html=""; //先要声明一下
            var data =json.list; //这里的json就是咱们传过来的 map ,data取到list集合
            for (var i = 0; i <data.length ; i++) {
                var ls = data[i]; //循环 ls 得到每一行数据 我这里得到的就是 ID=1 unam=九塔 pwd=。。 href=。。
                //下面就是拼接语句了 ,仔细看看 注意 "" ''  +  这三个
               html = '<li>'+
                       '<a href="'+ls.href+'">'+
                    '<img style="width: 200px; height: 200px;" class="one" id="img'+i+'"  src="'+ls.pwd+'" />'+ '</a>'+
                    '<p> ' + ls.uname + '</p>'+
                    '</li>';
                    //test 是上面定义的ID名
                $('#test').append(html);
            }


        }
    });

看下效果图
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值