数据怎么取的这里就不说了,从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);
}
}
});
看下效果图