1. 程式人生 > >使用servlet+Ajax展示資料,底層三層

使用servlet+Ajax展示資料,底層三層

以下全程自己做的 有什麼不好的地方棄其糟粕哈~

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();

導包圖,加js,fastJSON和jdbc

再底層的三層就不寫了
我整個寫的順序是BaseDao.java>entity(假設Pet實體類)>PetDao.java>PetDaoImpl.java>PetService.java>PetServiceImpl.java,寫完底層後寫Servlet,寫完servlet後才去建立頁面,畫頁面,編寫js。

另外…宣告我是個小姐姐,不是很厲害,但是很皮!這是給自己的總結,積累經驗,有吐槽我的…隨意…不要罵我就行,向我提建議改進程式碼我還是特別希望的!!謝大手們!

                                     by:一隻可愛的程式設計師小姐姐