spring boot專案 前臺介面動態新增div，以及特定點選div事件，delegate（）方法。
阿新 • • 發佈：2018-12-12
因為是初次寫前臺介面，在有些地方遇到了很多的問題，其中就包括著後臺得到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; } }