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;
}