之前写项目，总是用重定向或请求转发，导致每做一步动作就会刷新页面，客户体验不好，而且效率低下，这种问题可以使用ajax来有效的解决此类问题的发生。

我使用的框架：Spring boot

数据库：mysql

环境：JDK1.8

用的编程工具：eclipse

一、当我们第一次去访问一个页面时，用重定向直接跳转页面，不去做任何操作，这样可以减少页面跳转的卡顿

@RequestMapping("/show")
public ModelAndView ashow(){
return new ModelAndView("/accountaudit");
}
二、页面其他信息的展示，则全部使用异步，而页面的初始化展示，则使用异步，第一次访问页面时默认调此异步，关于使用同步还是异步，要看具体的情况。
这个是异步传的参数
var params = {
kaishi : "",
jieshu : "",
zuixiao : "",
zuida : "",
state : "",
homeAndAbroad : "",
payee : "",
pageNum : 1  //这个是默认当前页
};
默认第一次访问调用
getDatalist()
function getDatalist(){
//异步
$.post("/audits/selectuserParam", params, function(data) {
去把对象转成json格式
data = eval（data);
拼接，描述列字符串
var htmlStr = "
" + 
 
"
序号" + 
 
"
交易日期" + 
 
"
币种及金额(元)" + 
 
"
合同号" + 
 
"
收款方" + 
 
"
境内/境外" + 
 
"
审核状态" + 
 
"
操作" + 
 
"
";



这是一个Spring boot 里做的一个传输数据的处理，如果你不知道这个的话，可以忽略不写，大致意思是，data里有一属性，如果==1就说明后台到前台传输是正常的。

if(data.code == 1){
你传的属性都在，data里的，data属性里
var _list = data.data;
循环这个list
for(var i = 0; i < _list.length; i ++){
把集合遍历平成字符串
htmlStr += "
"; 
 
htmlStr += "
" + (i+1) + ""; 
 
htmlStr += "
" + _list[i].startDate + ""; 
 
htmlStr += "
" + _list[i].money + ""; 
 
htmlStr += "
" + _list[i].contractNumber + ""; 
 
htmlStr += "
" + _list[i].payeeName + ""; 
 
htmlStr += "
" + _list[i].domesticOrOverseas + ""; 
 
if(_list[i].stateId==1005){
htmlStr += "
银行审核中"; 
 
htmlStr += "
 
 查看"; 
 
 　　　　　　　　　　　　　　htmlStr += "
 
 
"; 
 
 　　　　　　　　　　　　　　htmlStr += "
 
 
"; 
 
}else if(_list[i].stateId==1003){
htmlStr += "
" + _list[i].stateName + ""; 
 
htmlStr += "
 
 查看"; 
 
htmlStr += "
 
 结算"; 
 
htmlStr += "
"; 
 
}else{
htmlStr += "
" + _list[i].stateName + ""; 
 
htmlStr += "
 
 查看"; 
 
htmlStr += "
"; htmlStr += ""; 
 
}
htmlStr += "
"; 
 
}
}else{
这个也是不用管，这个是如果data.code ！= 1 就报一个自定义的错
alert(data.msg);
}
把你拼的http字符串赋到制定位置
$("#zsList").html(htmlStr);
});
}
后台没有什么特殊的，和以前一样正常写，唯一要注意的地方是
/**
* 描述:展现
* @author mir cheng
*
* @return
*/
@RequestMapping("/selectuserParam")
@ResponseBody    //ajax要加是这个
public Result> selectuserParam(AuditMCVo amc,HttpServletRequest request){  //这个返回类型是自己封装的，有data，msg，code
HttpSession session = request.getSession();
Object staffObj = session.getAttribute("token");
StaffVo staff = ObjToObj.objToVoByRem(staffObj, StaffVo.class);
amc.setBank(staff.getParentId());
amc.setPageCount(5);
/*int totalCount = LSC.totalCounts(amcv);
amcv.setTotalCount(totalCount);*/
amc.setHh((amc.getPageNum() - 1) * amc.getPageCount());
List uvo = LSC.indexselect(amc);
for (AuditVo auditVo : uvo) {
System.out.println(auditVo);
}
return ResultUtil.ok(uvo);//也是自己封装的，你可以不管这个，以前怎么写还怎么写
}
还有一个查询总页数
var pages = {
num: 1,//页码数
startnum: 1,//指定页码
elem: $('#page1'),//指定的元素，这个是div的id
callback: function(n){//回调函数
params.pageNum = n;
getDatalist()
}
}
//获取总页数
getPageCount()
function getPageCount(){
$.post("/audits/getpagecount",params,function(data) {
data = eval（data)
pages.num = data.data;
Page(pages);//调用方法，这个调用的方法是js里的方法
});
}

这是分页组件，网上可以找的到

这个是分页的div