java項目如何使用ajax來減小頁面的刷新

          以前寫項目，老是用重定向或請求轉發，致使每作一步動做就會刷新頁面，客戶體驗很差，並且效率低下，這種問題可使用ajax來有效的解決此類問題的發生。

　　　我使用的框架：Spring boot

　　　數據庫：mysql

　　　環境：JDK1.8

　　　用的編程工具：eclipse

          1、當咱們第一次去訪問一個頁面時，用重定向直接跳轉頁面，不去作任何操做，這樣能夠減小頁面跳轉的卡頓

　　　　　　@RequestMapping("/show")
　　　　　　public ModelAndView ashow(){
　　　　　　　　return new ModelAndView("/accountaudit");
　　　　　　}

　　   2、頁面其餘信息的展現，則所有使用異步，而頁面的初始化展現，則使用異步，第一次訪問頁面時默認調此異步，關於使用同步仍是異步，要看具體的狀況。　　　

　　　　這個是異步傳的參數

　　　　　　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\" onclick=\"selects(" + _list[i].id + ",'" + _list[i].domesticOrOverseas + "')\">查看</a></td>";
　　　　　　　　　　　　　　htmlStr += "<td><a class=\"w_sp1\" onclick=\"yess(" + _list[i].id + ")\" ><img src=\"../img/audit/w_icon1.png\"></a></td>";
　　　　　　　　　　　　　　htmlStr += "<td><a class=\"w_sp4\" onclick=\"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=\"#\" onclick=\"selects(" + _list[i].id + ",'" + _list[i].domesticOrOverseas + "')\" >查看</a></td>";
　　　　　　　　　　　　　　htmlStr += "<td colspan=\"2\"><a class=\"w_sp1\" onclick=\"settle(" + _list[i].id + ")\" >結算</a></td>";
　　　　　　　　　　　　　　htmlStr += "<td></td>";
　　　　　　　　　　　　}else{
　　　　　　　　　　　　　　htmlStr += "<td>" + _list[i].stateName + "</td>";
　　　　　　　　　　　　　　htmlStr += "<td><a class=\"w_a1\" onclick=\"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>

這是兩個第一次執行的默認訪問的方法，若是其餘異步跑完要更新頁面展現的數據，只須要調用方法便可，從而減小的頁面的刷新，若是有其餘問題，敬請期待，關注吆