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\" 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>
这是两个第一次执行的默认访问的方法,如果其他异步跑完要更新页面展示的数据,只需要调用方法即可,从而减少的页面的刷新,如果有其他问题,敬请期待,关注吆
java项目如何使用ajax来减少页面的刷新的更多相关文章
- Ajax下载文件(页面无刷新)
说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...
- Ajax技术实现页面无刷新跳转
Ajax实现无刷新显示新的页面 <!DOCTYPE html> <html> <head> <script src="/jquery/jquery- ...
- 发送ajax请求时页面被刷新
浏览器默认会认为 button 的属性是submit.type='submit',会发生提交表单的默认行为,为button添加type="button"即可.
- 浅谈页面无刷新技术ajax
现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...
- JAVA-JSP内置对象之response对象实现页面自动刷新
相关资料:<21天学通Java Web开发> response对象 实现页面自动刷新1.可以通过response对象的addIntHeader()方法添加一个标题为Refrsh的标头,并指 ...
- C# 动态创建SQL数据库(二) 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示,编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求
C# 动态创建SQL数据库(二) 使用Entity Framework 创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...
- 【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)
一年前,从不知道Ajax是什么,伴随着不断的积累,到如今常常使用,逐渐有了深入的认识. 今天,假设想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在具体讨论Aj ...
- 【转】【Asp.Net】了解使用 ASP.NET AJAX 进行局部页面更新
简介Microsoft的 ASP.NET 技术提供了一个面向对象.事件驱动的编程模型,并将其与已编译代码的优势结合起来.但其服务器端的处理模型仍存在技术本身所固有的几点不足: 进行页面更新需要往返服务 ...
- 面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序
面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 Ajax 为更好的 Web 应用程序铺平了道路 在 Web 应用程序开发中,页面重载循环是最大的一个使用障碍,对于 Java™ ...
随机推荐
- java压缩与解压
一 概述 1.目录进入点 目录进入点是文件在压缩文件中的映射,代表压缩文件.压缩文件时,创建目录进入点,将文件写入该目录进入点.解压时,获取目录进入点,将该目录进入点的内容写入硬盘指定文件. 如果目录 ...
- iframe 子页面改变父页面样式
iframe 子窗口调节父窗口样式: $(window.parent.document).find("body").attr("style"," 父元 ...
- 怎样修改织梦网站的favicon图标
现在很多的网站浏览器栏上都有favicon图标,比如百度,大家用织梦做好网站后,可能发现自己的网站favicon图标默认的不好看,如何修改织梦网站的favicon导航图标呢,很多人肯定有过困惑,小编遇 ...
- <Android 应用 之路> MPAndroidChart~BarChart
简介 MPAndroidChart是PhilJay大神给Android开发者带来的福利.MPAndroidChart是一个功能强大并且使用灵活的图表开源库,支持Android和IOS两种,这里我们暂时 ...
- MySQL数据库(1)----入门级操作
1.在服务器主机上以 root 用户登陆,创建位于其他客户端的新用户: mysql> CREATE USER 'newuser'@'192.168.1.109' IDENTIFIED BY 'p ...
- Linux下OCI环境配置
ORACLE调用接口(Oracle Call Interface简称OCI)提供了一组可对ORACLE数据库进行存取的接口子例程(函数),通过在第三代程序设计语言(如C语言)中进行调用可达到存取ORA ...
- Android Studio修改app图标
1.将下载好的图片放到app\src\main\res\drawable目录下 2.在AndroidManifest.xml下加入一句 android:icon="@drawable/??? ...
- C++数组怎么复制
C++数组怎么复制: #include <string.h>main(){int a[10]={34,56,4,10,77,51,93,30,5,52};int b[10];memcpy( ...
- [问题记录]libpomelo工程调整编译链接错误
1. 描述: 如下图所示,出现链接错误.那么链接问题一般也就两块设置: (1)包含路径Additional Library Directories (2)lib库的包含Additional Depen ...
- 关于NativeEvent的处理
nativeEvent(const QByteArray &eventType, void *message, long *result){ chASSERT(message != NULL) ...