以下全程自己做的 有什么不好的地方弃其糟粕哈~
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:一只可爱的程序员小姐姐