前台
前台使用jsp进行渲染，请求需要调用ajax,来实现数据调用(满满的干货)
ajax请求样例
$.ajax({
url: '/aipocr/saveBatchData.action' ,
type: 'GET',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (result) {
debugger;
console.log(result);//打印服务端返回的数据(调试用)
},
error : function() {
debugger;
//alert("保存失败！");
}
});
- 注释
在数据传输时：
encodeURI()方式可以对传到后台的中文字段进行加密处理 ，防止传入的中文不会出现中文乱码现象
样例：
data: "saveData="+ encodeURI(encodeURI(obj[i].value)),
在后台需要调用URLDecoder()方法进行解密
样例：
String str = Request.getString(request, "saveData");
str = URLDecoder.decode(str,"UTF-8");
- 后台接受请求后返回
返回方式：
样例：
PrintWriter out = getResponse().getWriter();
out.write(str);
- 接受到的json数据分页
$.ajax({
url: '/queryIdCards.do' ,
type: 'GET',
data:{"parsingTime":parsingTime,"curPage":curPage,"pageSize":pageSize},
dataType: "json",
async: false,
ContentType: "application/json; charset=utf-8",
beforeSend: function(){
// Handle the beforeSend event
var initData = '<td>' + '#' +'</td>' + '<td>' +
'证号' +'</td>'+'<td>'+
'姓名' +'</td>'+'<td>'+
'性别' +'</td>'+'<td>'+
'民族' +'</td>'+'<td>'+
'出生日期' +'</td>'+'<td>'+
'地址'+'</td>'+'<td>'+
'签发机关'+'</td>'+'<td>'+
'有效期'+'</td>'+'<td>'+
'识别日期'+'</td>';
$("#tabletest").html('<tr>'+ initData +'</tr>');
},
success: function (result) {
debugger;
var idCards = result.idCards;
//每次搜索 初始化页面数据 第一页 每页10条
$("#curPage").val(result.curPage);//当前页数
$("#totalPage").val(result.totalPage);//一共多少页 后台传值
$("#pageSize").val(result.pageSize); //每页多少条
$("#totalNum").val(result.totalNum); //一共多少条
for(var i=0;i < result.idCards.length;i++)
{
var cardNo = result.idCards[i].cardNo==undefined? "":result.idCards[i].cardNo;
var name = result.idCards[i].name==undefined? "":result.idCards[i].name;
var sex = result.idCards[i].sex==undefined? "":result.idCards[i].sex;
var folk = result.idCards[i].folk==undefined? "":result.idCards[i].folk;
var birthday = result.idCards[i].birthday==undefined? "":result.idCards[i].birthday;
var address = result.idCards[i].address==undefined? "":result.idCards[i].address;
var issueAuthority = result.idCards[i].issueAuthority==undefined? "":result.idCards[i].issueAuthority;
var validUntil = result.idCards[i].validUntil==undefined? "":result.idCards[i].validUntil;
var parsingTime = result.idCards[i].parsingTime==undefined? "":result.idCards[i].parsingTime;
var tableData = '<td>' + i +'</td>' + '<td>' +
cardNo +'</td>'+'<td>'+
name +'</td>'+'<td>'+
sex+'</td>'+'<td>'+
folk+'</td>'+'<td>'+
birthday+'</td>'+'<td>'+
address+'</td>'+'<td>'+
issueAuthority+'</td>'+'<td>'+
validUntil+'</td>'+'<td>'+
parsingTime+'</td>';
//debugger;
$("#tabletest").append('<tr>'+ tableData +'</tr>');
}
}
});
- 分页代码
$(function(){
//getByPageBean(1);
$("#search").click(function(){
debugger;
//每次搜索 初始化页面数据 第一页 每页10条
$("#curPage").val(1);//当前页数
//$("#totalPage").val(5);//一共多少页 后台传值
$("#pageSize").val(10); //每页多少条
//$("#totalNum").html(60); //一共多少条
getIdCards();
});
$("#firtPage").click(function(){
debugger;
//每次搜索 初始化页面数据 第一页 每页10条
$("#curPage").val(1);//当前页数
//$("#totalPage").val(5);//一共多少页 后台传值
$("#pageSize").val(10); //每页多少条
//$("#totalNum").html(60); //一共多少条
getIdCards();
});
//上一页
$("#lastPage").click(function(){
debugger;
var curPage = document.getElementById("curPage").value;
if(curPage > 1){
var curPageChenge = parseInt(curPage) - 1;
//每次搜索 初始化页面数据 第一页 每页10条
$("#curPage").val(curPageChenge);//当前页数
//$("#totalPage").val(5);//一共多少页 后台传值
$("#pageSize").val(10); //每页多少条
//$("#totalNum").html(60); //一共多少条
getIdCards();
}
});
$("#nextPage").click(function(){
debugger;
var curPage = document.getElementById("curPage").value;
var totalPage = document.getElementById("totalPage").value;
if(totalPage > curPage){
var curPageChenge = parseInt(curPage) + 1;
//每次搜索 初始化页面数据 第一页 每页10条
$("#curPage").val(curPageChenge);//当前页数
//$("#totalPage").val(5);//一共多少页 后台传值
$("#pageSize").val(10); //每页多少条
//$("#totalNum").html(60); //一共多少条
getIdCards();
}
});
$("#end").click(function(){
debugger;
var curPage = document.getElementById("curPage").value;
var totalPage = document.getElementById("totalPage").value;
if(totalPage > curPage){
//每次搜索 初始化页面数据 第一页 每页10条
$("#curPage").val(totalPage);//当前页数
//$("#totalPage").val(5);//一共多少页 后台传值
$("#pageSize").val(10); //每页多少条
//$("#totalNum").html(60); //一共多少条
getIdCards();
}
});
});
- 页面
<form class="form-inline" role="form">
<ul class="pager">
<li>
当前第
<input type="text" id="curPage" name="curPage" readonly="readonly" class="form-control" value="0" style="width: 50px"/>
页/共
<input type="text" id="totalPage" name="totalPage" readonly="readonly" class="form-control" value="0" style="width: 50px"/>
页 每页
<input type="text" id="pageSize" name="pageSize" readonly="readonly" class="form-control" value="0" style="width: 50px"/>
条/共
<input type="text" id="totalNum" name="totalNum" readonly="readonly" class="form-control" value="0" style="width: 50px"/>
条</li>
<li><a id="firtPage" page="1">首页</a></li>
<li ><a id="lastPage" page="${curPage-1}">上一页</a></li>
<li ><a id="nextPage" page="${curPage+1}">下一页</a></li>
<li ><a id="end" page="${totalPage}">尾页</a></li>
<li ><a id="go">GO</a></li>
</ul>
</form>
- Form表单的异步提交
<div class="data-view" data-label="确认结果" id="formOnline_div" high>
<form id="formOnline" onsubmit="return false" action="##" method="POST">
<div class="form-group">
<div class="col-sm-12 control-div">
<label class="col-sm-12 control-label" for="gender">姓名</label>
<input id="name" name="name" value="${name}" class="form-control" type="text"
placeholder="请输入" class="input-large" check-type="required">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-sm-12 control-div">
<label class="col-sm-12 control-label" for="birthday">出生</label>
<input id="birthday" name="birthday" value='<fmt:formatDate value="${birthday}"/>' class="form-control" type="text"
placeholder="请输入" class="input-large" check-type="required">
</div>
</div>
<link rel="stylesheet" href="staticresoure/datetime/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="staticresoure/datetime/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="staticresoure/datetime/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
$('#birthday').datetimepicker({
format: 'yyyy-mm-dd', // 格式, 'mm/dd/yyyy'
minView: 2, //最精确的时间选择视图, 0
language: 'zh-CN', // 语言, en
todayBtn: true, //是否显示今天按钮, false
todayHighlight: true, // 高亮当前日期, false
//initialDate: new Date(), // 初始时间, new Date()
});
</script>
<!-- Button (Double) -->
<%-- onclick="window.location.href='dept_update.action?t=edit&deptno=<%=dept.getDeptno() %>'" --%>
<div class="form-group">
<label class="col-sm-3 control-label" for="save"></label>
<div class="col-sm-2 control-div">
<button id="save" name="save" class="btn btn-success" onclick="formSubmit()">保存</button>
<!--<button type="button" class="btn-primary" style="display:none" id="upload-scan-photo-idcard" onclick="$('#demo-phototype-upload').attr('checked',true);doUploadCheck();">上传并检测</button>-->
<!-- <button id="reset" type="reset" name="reset" class="btn btn-danger">重置</button> -->
</div>
</div>
</form>
</div>
- 由于后台用的是hibernate进行查询 不能使用limit进行分页
@SuppressWarnings("unchecked")
public List<IdCard> queryIdCard(final String hql,final int firstNum,final int sumNum,final Object[] params) {
try {
return (List<IdCard>)getHibernateTemplate().execute(new HibernateCallback() {
@SuppressWarnings("unchecked")
@Override
public List<IdCard> doInHibernate(Session session) throws HibernateException, SQLException {
Query query = session.createQuery(hql);
if(params != null && params.length > 0)
{
for(int i=0,length=params.length;i<length;i++)
{
query.setDate(i, (Date)params[i]);
}
}
query.setFirstResult(firstNum);
query.setMaxResults(sumNum);
List<IdCard> list = (List<IdCard>)query.list();
if(list != null && list.size() > 0)
{
return list;
}
return null;
}
});
} catch (Exception e) {
logger.error("DAO异常："+e.getMessage());
}
return null;
}
结尾
小白一枚，不喜勿喷 _
[1]: 参考了很多文档 就不列出来了
4026
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
