转自点击打开链接
以前用Ajax都是返回对象数据,然后循环遍历对象数据去拼接成某个需要刷新模块的内容。当数据量大的时候,或者
页面节点比较复杂多的时候,还真麻烦,而且需求改变的时候,要去改变拼接的内容,实在看得眼花缭乱。可通过下
面的方式简便实现:
$(parent.document).on("click",".upStaff",function(){
$(".modal-dialog").html("");
$.post("getStaffById",{"staff.id":staffId},function(result){
$(".modal-dialog").html(result);
});
$("#gridSystemModal").modal("show");
});
这是公司项目某个代码片段,以下对代码进行说明:
$(parent.document)--选择父窗体的元素
.on(".click"~~~~)--jQuery1.8之后取消了live和bind绑定方式(好像是),反正现在用.on这种方式就对了
$(".modal-dialog").html("");--把这个div里面的内容设置为空
$.post的回调函数的result,alert警告框是整个页面,因为action中配置了注解:
@Action(value="getStaffById",results={
@Result(name="json",location="/admin/system/department/updateStaff.jsp")
})
也就是说result接收到的是updateStaff.jsp整个页面内容。
$(".modal-dialog").html(result);--把内容放到这个“.modal-dialog” div盒子中。
$("#gridSystemModal").modal("show");---把这个“.modal-dialog” div 显示出来,这是个bootstrap前端框架的api,你只需知道这个div本来是隐藏的,现在把它设置为显示就行了。
总结
这样就比较方便了,比如我们要修改员工信息,那么我们在action中返回updateStaff.jsp中,可以使用jstl + el表达式
配合使用去加载出所需要的信息,因为是Ajax请求,最终updateStaff.jsp还是返回到当前请求的Ajax中,这就是HTML
格式返回吧。