使用servlet+Ajax展示資料,底層三層
阿新 • • 發佈:2018-12-11
以下全程自己做的 有什麼不好的地方棄其糟粕哈~
html頁面
產品程式碼 | 風險評級 | 預期收益 | 發售起始日 | 發售截止日 | 產品到期日 | 修改操作 | 刪除操作 |
頁面載入事件執行
$(document).ready(function(){
//獲取第一個tr var tr=$("#tr"); //我的表單中有一個input和一個select控制元件。用來查詢並返回資料 var id=$(".id").val(); var risk=$(".risk").val(); //點選查詢按鈕時 $("#sub").click(function(){ var form=$("form").serialize();//表單序列化 //post方式提交,json格式 $.post("servlet訪問路徑","opr=all&"+form,init,"json"); }); //該查詢操作的回撥函式 function init(data){ //將tr的所有同級移除 tr.siblings().remove(); //遍歷data中的資料,展示到頁面中 $.each(data,function(key,val){ var risk; if(val.risk==1){ risk="R1"; }else if(val.risk==2){ risk="R2"; }else if(val.risk==3){ risk="R3"; }//以上操作是將資料庫中的int型別轉為文字給使用者看 //向table中追加子元素並繫結查詢回來的資料 tr.parent().append("<tr><td>"+val.id+"</td><td>"+risk+"</td><td>"+val.income+"</td><td>"+val.salcStarting+"</td><td>"+val.salcEnd+"</td><td>"+val.end+"</td><td><a class='update' href='/fp/addAndUpdate.jsp?id="+val.id+"'>修改</a></td><td><a class='del' href='javascript:void(0)'><span style='display:none'>"+val.id+"</span>刪除</a></td></tr>"); }); //隔行變色 $(".table tr:even").css("backgroundColor","#999"); } //刪除 $(".table").on("click",".del",function(){ if(confirm("確認刪除嗎?")){ var id=$(this).children("span").text(); //重新整理頁面 $.post("fpSer","opr=del&id="+id+"",del,"json"); } }); //刪除的回撥函式,接收out.print的輸出資料 function del(data){ if(data==true){//這裡是boolean的true,假設是字串的true會提示你刪除失敗,但是資料庫中的資料是沒了的 ps:親測 alert("刪除成功!"); //刪除後使用ajax重新整理頁面 $.post("訪問路徑","opr=all&id="+id+"&risk="+risk+"",init,"json"); }else{ alert("刪除失敗!"); } }
});
這是學了servlet和jsp以及ajax非同步重新整理結合的操作,上面實現了查詢和刪除功能,以下是servlet的程式碼
//設定編碼格式 response.setContentType("text/html;charset=utf-8;"); //建立Service層物件 (我用的三層) FinancingProductService fpService =new FinancingProductServiceImpl(); String opr=request.getParameter("opr");//接收opr(判斷是什麼操作 增or刪or查or改) PrintWriter out = response.getWriter();//輸出流 if("all".equals(opr)){//查詢 //獲取ajax/頁面傳來的值 String id=request.getParameter("id"); int risk=Integer.parseInt(request.getParameter("risk")); //集合物件接收返回資料 List<FinancingProduct> listFP=new ArrayList<FinancingProduct>(); try { listFP=fpService.listFP(id, risk);//呼叫查詢全部的方法獲得資料 //轉成JSON串輸出 這是ajax接收到資料的關鍵,使用的是fastJSON的jar包,下面有圖 out.print(JSON.toJSONString(listFP)); } catch (Exception e) { e.printStackTrace(); } }else if("del".equals(opr)){//刪除 String id=request.getParameter("id"); try { int result=fpService.delFP(id);//呼叫刪除方法 if(result>0){ out.print("true");//成功輸出字串true,else為false,可在下面catch塊加 }else{ out.print("false"); } } catch (Exception e) { out.print("false"); e.printStackTrace(); } } out.flush(); out.close();
再底層的三層就不寫了
我整個寫的順序是BaseDao.java>entity(假設Pet實體類)>PetDao.java>PetDaoImpl.java>PetService.java>PetServiceImpl.java,寫完底層後寫Servlet,寫完servlet後才去建立頁面,畫頁面,編寫js。
另外…宣告我是個小姐姐,不是很厲害,但是很皮!這是給自己的總結,積累經驗,有吐槽我的…隨意…不要罵我就行,向我提建議改進程式碼我還是特別希望的!!謝大手們!
by:一隻可愛的程式設計師小姐姐