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

再底层的三层就不写了
我整个写的顺序是BaseDao.java>entity（假设Pet实体类）>PetDao.java>PetDaoImpl.java>PetService.java>PetServiceImpl.java，写完底层后写Servlet,写完servlet后才去创建页面，画页面，编写js。

                                     by:一只可爱