因为是初次写前台界面，在有些地方遇到了很多的问题，其中就包括着后台得到List,在前台玄幻div显示界面，接收数据。一下是循环显示的代码。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>图书借阅记录</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none;cursor: pointer;}
*{ margin: 0; padding: 0; }
body{
padding: 4px 20px;
}
.btn-sm{
width:180px;
}
h2{
color: #777;
font: 30px/50px 'Times New Roman';
}
body{
background: #CCC;
background: url('images/21.jpg') no-repeat 0 0/cover;
}
.img{
height: 25px;
width: 25px;
position: absolute;
left: 2%;
top: 3%;
cursor: pointer;
}
.box{
width: 85%;
margin-left: 5%;
margin-top: 1%;
height: 80px;
/* background: #6CF; */
}
p{
font: 14px/20px 'Times New Roman';
color: #777;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.store{
height: 25px;
width: 25px;
position: relative;
right: -72%;
top: 8%;
/* cursor: pointer; */
opacity: 0.5;
}
.order{
height: 24px;
width: 24px;
position: relative;
right: -60.5%;
margin-bottom: 12%;
/* cursor: pointer; */
opacity: 0.5;
}
.box2:hover {
background: rgba(206, 204, 204, 0.61);
}
.order:hover{
cursor: pointer;
opacity: 1;
}
.store:hover{
opacity: 1;
cursor: pointer;
}
</style>
<script src="js/jquery-1.9.1.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body >
<div style="width: 100%;height: 5%;" class="zxc" id="bod">
<img src="images/fh3.png" class="img">
</div>
<div class="container" style="margin-top:15%;">
<div class="row" >
<h2 style="text-align:center;">请点击图书进行还书 </h2>
<div class="box" id="app">
</div>
</div>
</div>
<script type="text/javascript">
function showData(data) {
for (var i = 0; i < data.length; i++) {
var div=document.createElement("div");
div.id='div'+i;
document.getElementById("app").appendChild(div);
div.innerHTML='<div style="display:block;height:100px" class="box2"><img src="images/bg.png" style="height:82%;width:20%;position:relative;left:3%;margin-top: 3%;border-radius: 3px;" >'+
' <div style="position:relative;left:25%;top:-80px;" class="die">'+
' <p1 id="'+data[i].id+'";"class="p1">书的id：'+data[i].id+'</p1>'+
' <p>书名：'+data[i].bookname+'</p>'+
' <p>出版社：'+data[i].edition+'</p>'+
'<span class="float:right;font: 12px/20px ;">'+
'</span>'+
' </div></div>'
}
}
$(function () {
$.ajax({
url:"/rReturnbook",
type:"post",
dataType: "json",
contentType:"application/json",
success: function (data) {
showData(data);
console.log(data);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert("失败")
}
});
$("div").delegate("p1","click",function(event){
var a=$(this).attr("id");
dldata={"id":a};
var data=JSON.stringify(dldata);
alert(data);
event.stopPropagation();
$.ajax({
url:"/delete/book",
type:"post",
data:data,
contentType:"application/json",
dataType:"json",
success: function (datas) {
if(datas==1){
alert("归还图书已成功，请将借阅的书籍放到原位");
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert("失败")
}
});
});
});
</script>
</body>
</html>在这段代码里面还涉及到了delegate（）方法，因为这是一个动态添加的界面，所以一般的点击div的方法都不行，需要使用特定的方法，去接收点击事件，在这里我使用的就是delegate（）方法。使用$("div").delegate("p1","click",function(event) 的时候要注意几点问题：1，要注意$（“div”）接收到的是每层的div，所以你有多少<div></div>，在最后的时候就会出现多少个弹框。2，要注意添加上事件，也就是function（）里面的内容。
一下是一部分后台代码，希望对大家有帮助。
package com.b505.controller;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.b505.entity.Bookinfo;
import com.b505.service.BookinfoService;
/**
* <p>b505信息科学研究所</p>
* @Description 给前台传递用户借书的信息
* @Creat date 2018-9-23 22:30
* @author yulin
* @return bookinfo
*
*/
@RestController
public class ReturnController {
@Autowired
private BookinfoService bookinfoService;
@RequestMapping("rReturnbook")
public List<Bookinfo> ReturnBook(HttpServletRequest request){
HttpSession session = request.getSession();
String borrowopenid = (String)session.getAttribute("openId");
System.out.println(borrowopenid);
//String openid="ox7Ib07x5jCbRB9JK85Mx400UiPE";
//将数据放入到bookinfo
List<Bookinfo> bookinfo=bookinfoService.findbook(borrowopenid);
System.out.println("*************************************************bookinfo="+bookinfo);
return bookinfo;
}
}
package com.b505.controller;
import net.sf.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.b505.entity.Borrowbook;
import com.b505.service.BrrowBookService;
/**
* <p>b505信息科学研究所</p>
* @Description 删除书籍
* @Creat date 2018-9-25 21:58
* @author yulin
*
*/
@Controller
public class DeleteBookController {
@Autowired
private BrrowBookService brrowBookService;
@ResponseBody
@RequestMapping(value = "/delete/book", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
public int getByJSON( @RequestBody JSONObject jsonParam) {
// 直接将json信息打印出来
System.out.println("---------开始-----------");
Borrowbook borrowbook =new Borrowbook();
borrowbook.setBookid(jsonParam.getInt("id"));
brrowBookService.delete(jsonParam.getInt("id"));
return 1;
}
}
591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
