java项目如何使用ajax来减少页面的刷新

          之前写项目，总是用重定向或请求转发，导致每做一步动作就会刷新页面，客户体验不好，而且效率低下，这种问题可以使用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 = "<tr>" +
　　　　　　　　"<th width='3%'>序号</th>" +
　　　　　　　　"<th width='17%'>交易日期</th>" +
　　　　　　　　"<th width='10%'>币种及金额（元）</th>" +
　　　　　　　　"<th width='15%'>合同号</th>" +
　　　　　　　　"<th width='20%'>收款方</th>" +
　　　　　　　　"<th width='10%'>境内/境外</th>" +
　　　　　　　　"<th width='10%'>审核状态</th>" +
　　　　　　　　"<th width='15%' colspan='3'>操作</th>" +
　　　　　　　　"</tr>";

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

　　　　　　　　if(data.code == 1){

　　　　　　　　　　你传的属性都在，data里的，data属性里
　　　　　　　　　　var _list = data.data;

　　　　　　　　　　循环这个list
　　　　　　　　　　for(var i = 0; i < _list.length; i ++){

　　　　　　　　　　　　把集合遍历平成字符串
　　　　　　　　　　　　htmlStr += "<tr>";
　　　　　　　　　　　　htmlStr += "<td>" + (i+1) + "</td>";
　　　　　　　　　　　　htmlStr += "<td>" + _list[i].startDate + "</td>";
　　　　　　　　　　　　htmlStr += "<td>" + _list[i].money + "</td>";
　　　　　　　　　　　　htmlStr += "<td>" + _list[i].contractNumber + "</td>";
　　　　　　　　　　　　htmlStr += "<td>" + _list[i].payeeName + "</td>";
　　　　　　　　　　　　htmlStr += "<td>" + _list[i].domesticOrOverseas + "</td>";
　　　　　　　　　　　　if(_list[i].stateId==1005){
　　　　　　　　　　　　　　htmlStr += "<td>银行审核中</td>";
　　　　　　　　　　　　　　htmlStr += "<td><a class=\"w_a1\" οnclick=\"selects(" + _list[i].id + ",'" + _list[i].domesticOrOverseas + "')\">查看</a></td>";
　　　　　　　　　　　　　　htmlStr += "<td><a class=\"w_sp1\" οnclick=\"yess(" + _list[i].id + ")\" ><img src=\"../img/audit/w_icon1.png\"></a></td>";
　　　　　　　　　　　　　　htmlStr += "<td><a class=\"w_sp4\" οnclick=\"nos(" + _list[i].id + ")\"><img src=\"../img/audit/w_icon2.png\"></a></td>";
　　　　　　　　　　　　}else if(_list[i].stateId==1003){
　　　　　　　　　　　　　　htmlStr += "<td>" + _list[i].stateName + "</td>";
　　　　　　　　　　　　　　htmlStr += "<td><a class=\"w_a1\" href=\"#\" οnclick=\"selects(" + _list[i].id + ",'" + _list[i].domesticOrOverseas + "')\" >查看</a></td>";
　　　　　　　　　　　　　　htmlStr += "<td colspan=\"2\"><a class=\"w_sp1\" οnclick=\"settle(" + _list[i].id + ")\" >结算</a></td>";
　　　　　　　　　　　　　　htmlStr += "<td></td>";
　　　　　　　　　　　　}else{
　　　　　　　　　　　　　　htmlStr += "<td>" + _list[i].stateName + "</td>";
　　　　　　　　　　　　　　htmlStr += "<td><a class=\"w_a1\" οnclick=\"selects(" + _list[i].id + ",'" + _list[i].domesticOrOverseas + "')\">查看</a></td>";
　　　　　　　　　　　　　　htmlStr += "<td></td>"; htmlStr += "<td></td>";
　　　　　　　　　　　　}

　　　　　　　　　　　　htmlStr += "</tr>";
　　　　　　　　　　}

　　　　　　　　}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<AuditVo> 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里的方法
});
}

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

<script type="text/javascript" th:src="@{/js/registercheck/pager.js}">  </script> 

<link rel="stylesheet" th:href="@{/css/user/pager.css}"/>

这个是分页的div

<div class="v1-3">
<ul class="pagination" id="page1"> </ul>
<div class="pageJump">
<span>跳转到</span>
<input type="text"/>
<span>页</span>
<button type="button" class="button">确定</button>
</div>
</div>

这是两个第一次执行的默认访问的方法，如果其他异步跑完要更新页面展示的数据，只需要调用方法即可，从而减少的页面的刷新，如果有其他问题，敬请期待，关注吆

 

转载于:https://www.cnblogs.com/cmjChunShu/p/9790911.html