Ajax请求springMVC获得返回值



jQuery+AJAX+SpringMVC

一.适用于多个结果图/表放在一个页面而且没有分页情况

jsp页面:

<div id="histPic_ExpectEndSituation" class="show_echart1">
<div class="tb_tit" >强制终止表</div>
<div class="tb_dw">单位：件、万元</div>
<table id="pageTable" border="1" cellspacing="1" width="100%" align="center" bordercolor="white" style="table-layout:fixed;">
<thead>
<tr class="td_tit">
<td>年</td>
<td>件</td>
<td>本金</td>
<td>本息和</td>
<td>保单价值</td>
<td>终止率（按件数）</td>
<td>终止率（按金额）</td>
</tr>
</thead>
<tbody >

</tbody>
</table>
</div>
</div>

js页面:

var searchData = {
"org" : org,
"year" : year,
"sector" : sector
};

function searchExpectEndSituation(searchData) {
var searchUrl = getRootPath() + "debitReport/searchExpectEndSituation";
ajaxFun(searchUrl, searchData, histPicExpectEndSituation);
}

function ajaxFun(ajaxUrl, ajaxData, callback) {
$.ajax({
type : "POST",
dataType : "json",
url : ajaxUrl, 
data : ajaxData, //可选。映射或字符串值。规定连同请求发送到服务器的数据
success : function(data) {//当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
callback(data);
},
error : function(data) {
}
});
}

function histPicExpectEndSituation(data) {     //请求成功后调用的callback(data)方法
$("#pageTable tbody").empty();
for (var i = 0; i < 4; i++) {
if (i % 2 === 0) {
var trObj = $("<tr class='tr_odd'>" +
"<td>"+data.timeList[i]+"</td>" +
"<td>"+data.policyNum[i]+"</td>" +
"<td>"+data.amount[i]+"</td>" +
"<td>"+data.allmount[i]+"</td>" +
"<td>"+data.policeValue[i]+"</td>" +
"<td>"+data.policyNumRates[i]+"</td>" +
"<td>"+data.amountRates[i]+"</td>" +
"</tr>");
} else {
var trObj = $("<tr class='tr_even'>" +
"<td>"+data.timeList[i]+"</td>" +
"<td>"+data.policyNum[i]+"</td>" +
"<td>"+data.amount[i]+"</td>" +
"<td>"+data.allmount[i]+"</td>" +
"<td>"+data.policeValue[i]+"</td>" +
"<td>"+data.policyNumRates[i]+"</td>" +
"<td>"+data.amountRates[i]+"</td>" +
"</tr>");
}
$("#pageTable tbody").append(trObj);
}
}

Controller.java页面:

/**
 * @param org
 * @param time
 * @param sector
 * @return map
 */
@RequestMapping(value = "/searchExpectEndSituation")
@ResponseBody   //POST模式下，使用 @RequestBody绑定请求对象，Spring会帮你进行协议转换，将Json、Xml协议转换成你需要的对象.
public Map<String, Object> searchExpectEndSituation(String org, Integer year,
String sector) {
Map<String, Object> map = new HashMap<String, Object>();

List<Object[]> list = debitReportService.queryExpectEndSituation(org, year,
sector);
List<String> timeList = debitReportService.getThirdPeriod(year, sector);

map.put("list", list);
map.put("timeList", timeList);
return map;
}

二.适用于单个图/表有分页条件的情况
jsp页面:

<div id="role_content_div">
<div id="select_div">
角色名称：<input id="name" type="text" name="name" class="role_select_name" />
<span class="role_select_btn" onclick="clickSelect()">查询</span>
</div>
<div class="table_head">
<span>角色名称</span>
<span>角色代码</span>
<span>操作</span>
</div>
<div class="table_body">

</div>
<div class="table_page">
<span id="totle">0条搜索结果</span>
<span>
<a href="#" class="page_left"><img src="<c:url value="/img/u556.png"/>" width="15px" onclick="changePage(-1)"></a> //图片是一个 "<"
<input id="page_input" name="page" type="text" value="1" onchange="changePage(0)" />
<span id="page_totle">/ 1</span>
<a href="#" class="page_right"><img src="<c:url value="/img/u558.png"/>" width="15px" onclick="changePage(1)"></a>  //图片是一个 ">"
</span>
<span id="add_role" class="role_select_btn" onclick="addRole()">增加</span>
</div>
</div>

js页面:

var totlePage = 0;
var oldPage = 1;

$(function(){
loadRoleData();
});

function clickSelect(){
$("#page_input").val(1);
loadRoleData();
}

function loadRoleData(){
var name=$("#name").val();
var size = new Number(10);
var page=$("#page_input").val();
var ajaxUrl = getRootPath()+"role/findPageRole";
var ajaxData = {"name":name,"page":page,"pageSize":size}; 
ajaxOnReturn(ajaxUrl,ajaxData,loadRoleDataHtml);
}

function loadRoleDataHtml(data){
var tableBody = $(".table_body");
tableBody.empty();
$("#totle").html(data.totle+"条搜索结果")
totlePage = data.totlePage!=0?data.totlePage:1;
if($("#page_input").val() > totlePage){
$("#page_input").val(1);
}
$("#page_totle").html("/ "+totlePage);
var dataList = data.list;
for (var i = 0; i < dataList.length; i++) {
var data = dataList[i];
var tName = $("<span>"+data.name+"</span>");
var tCode = $("<span>"+data.code+"</span>");
var tOrgCode =$("<span>"+checkNull(data.orgCode)+"</span>");
var tDoBtn = $("<span></span>");
var btnUp = $("<span class=\"role_select_btn\" onclick=\"updateDetailRole('"+data.id+"','update')\">修改</span>");
var btnDel = $("<span class=\"role_select_btn\" onclick=\"deleteRole('"+data.id+"')\">删除</span>");
var btnDetail = $("<span class=\"role_select_btn\" onclick=\"updateDetailRole('"+data.id+"','detail')\">详情</span>");

tDoBtn.append(btnUp);
tDoBtn.append(btnDel);
tDoBtn.append(btnDetail);

tableBody.append(tName);
tableBody.append(tCode);
tableBody.append(tDoBtn);

}
}

function changePage(addValue){
var page=new Number($("#page_input").val()) + new Number(addValue);
if(page <= totlePage && page > 0 ){
oldPage = page;
$("#page_input").val(page);
loadRoleData();
}else{
$("#page_input").val(oldPage);
}
}
删除
function deleteRole(roleId){
openMsgSureDialog("您确定要删除该角色吗？","isReayDeleteRole",roleId);
}
function isReayDeleteRole(roleId){
var ajaxUrl = getRootPath()+"role/deleteRole";
var ajaxData = {"id":roleId};
ajaxOnReturn(ajaxUrl,ajaxData,deleteRoleReturn);
}
function deleteRoleReturn(data){
var result = data.result;
if(result.success){
openMgsShowDialog(result.msg);
loadRoleData();
}
}
修改
function updateDetailRole(roleId,action){
var url = "role/doRole";
var data = {"id":roleId,"action":action};
loadHomeDialog(url,data);
}
//增加
function addRole(){
var url = "role/doRole";
loadHomeDialog(url,null);
}
//打开消息确认框,关闭消息提示框
function openMsgSureDialog(content,returnName,value){
$("#msg_dialog").show();
//关闭消息确认框
$("#mgs_show_dialog").hide();
//打开消息提示框
$("#msg_sure_dialog > div[class='msg_dialog_content']").html(content);
$("#msg_sure_dialog").show();
$("#msg_sure_btn").attr("onclick",returnName+"("+value+")");
}
/**
 * ajax请求回调
 * @param ajaxUrl
 * @param ajaxData-->json格式
 * @param returnName
 */
function ajaxOnReturn(ajaxUrl,ajaxData,returnName){
$.ajax({
type:"POST",
dataType:"json",
url:ajaxUrl,
data:ajaxData,
success:function(data){
returnName(data);
},
error:function(data){
}
});
}
//打开消息提示框,关闭消息确认框
function openMgsShowDialog(content){
$("#msg_dialog").show();
//关闭消息确认框
$("#msg_sure_dialog").hide();
//打开消息提示框
$("#mgs_show_dialog > div[class='msg_dialog_content']").html(content);
$("#mgs_show_dialog").show();
}

Java--control层:

/**
 * 分页获取角色信息
 * @return
 */
@RequestMapping(value="/findPageRole")
@ResponseBody
public Map<String, Object> findPageRole(String name,int page, int pageSize){
Pageable pageable = new PageRequest(page-1,pageSize);
RoleEO role=new RoleEO();
role.setName(name);
Map<String,Object> map = new HashMap<String,Object>();
Page<RoleEO> data = roleService.query(role,pageable);
map.put("totle", data.getTotalElements());
map.put("totlePage", data.getTotalPages());
map.put("list", data.getContent());
return map;
}