1. 程式人生 > >struts標籤以及url下發下一個url帶引數

struts標籤以及url下發下一個url帶引數

頁面A

加入方法

<script>
function tobelong(){
	console.log(encodeURIComponent(document.location.href));
	window.location = "belong_getSelect.action?type=social&partner_id=${partner_id}&last_url=" + encodeURIComponent(document.location.href);
}
</script>

給標籤新增此方法,點選該標籤跳轉到另一個選擇頁面(B)

頁面B

選擇條件後,跳轉會頁面A

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/common/tablib.jsp"%>
<%@ taglib uri="/struts-tags" prefix="s" %>  
<!doctype html>
<html lang="zh">
<head>
<meta name='viewport'
	content='width=device-width, initial-scale=1.0, maximum-scale=1.0'
	charset="UTF-8" />
<title></title>
<script>
	var title = "選擇";
	var url;
	if('${type}' == 'social'){
		title += "社保";
		url = "social_loadCity.ajax";
	}else if('${type}' == 'provident'){
		title += "公積金";
	}
	
	url += "?partner_id=${partner_id}";

	title += "歸屬";
	document.title = title;
	
</script>
<link rel="stylesheet" href="<%=basePath%>/css/base.css">
	<link rel="stylesheet" href="<%=basePath%>/partnercss/${style_path}.css">
<style>
	
	a:link,a:visited{
		text-decoration:none;  /*超連結無下劃線*/
		color: blue;
	}
	#float_zm {
		margin: 2% 2% 2% *;
	    z-index: 90;
	    width: 11%;
	    height: 87%;
	    right: 5px;            
	    position:fixed;
	}
	#city_div {
		padding: 0% 2% 2% 1%;
		width:100%;
	}
	#float_table {
	 	right: 5%;
	 	top: 4%;
  		position: fixed;
	}
	#data {
		width:100%;
	}
	#data tr td {
		border-bottom: 1px solid #e5e5e5;
		padding: 2% 1% 2% 1%;
	}
</style>
</head>
<body>

<!-- 必須使用隱藏的,js中url引數會有問題(&) -->
<input type="hidden" value="${last_url }" id="lastUrl">
	<div id="city_div">
		<table id="data">
		</table>
	</div>
	<div id="float_zm">
		<table id="float_table">
		</table>
	</div>
</body>
<script>
	//$("#data").html('');
	
	//有序無重複字母列表
	var sort_first_zm = [];
	var j = 0;
	
	<c:forEach var="t" items="${belongList}">
		var ishave = false;
		for(var i = 0; i < sort_first_zm.length;i++){
			if(sort_first_zm[i] == '${t.city_first_zm}'){
				ishave = true;
				break;
			}
		}
		if(!ishave){
			sort_first_zm[j] = '${t.city_first_zm}';
			j++;
		}
	</c:forEach>
	//排序賦值
	sort_first_zm = sort_first_zm.sort();
	//fruits.sort();  
	//fruits.reverse(); 
	
	//console.log(document.getElementById("data"));
	//開始進行有序顯示
	for ( var zm in sort_first_zm) {
		
		var now_zm = sort_first_zm[zm];
		var show_zm = sort_first_zm[zm];
		//為字母列表賦值
		var float_text = "<a href='#";
		var insert_float = document.getElementById("float_table").insertRow(document.getElementById("float_table").rows.length);
		if(now_zm == '')
			now_zm = "#";
		float_text += now_zm + "'>" + now_zm;
		float_text += "</a>";
		insert_float.insertCell(0).innerHTML = float_text;
		
		//為城市列表賦值
		var text = "<a name='" + now_zm + "'>" + now_zm + "</a>";
		var insert = document.getElementById("data").insertRow(document.getElementById("data").rows.length);
		insert.insertCell(0).innerHTML = text;
		
		<c:forEach var="li" items="${belongList}">
			//console.log('${li.city_desc}');
			if(show_zm == '${li.city_first_zm}'){
				var insert = document.getElementById("data").insertRow(document.getElementById("data").rows.length);
				insert.insertCell(0).innerHTML = '<span onclick="gotoLast(${li.city_code},\'${li.city_desc}\');">${li.city_desc}</span>';
				//insert.insertCell(1).innerHTML = '字母   ${li.city_first_zm}';
			}
		</c:forEach>
	}
	/**
	for(var i = 0; i < '${belongList.size()}';i++){
		console.log(i);
		var da = '${belongList.size()}';
		sort_first_zm[i] = 
	}
	$("#data");
	*/
	
function gotoLast(code,city){
	var lasturl = document.getElementById("lastUrl").value;
	if(lasturl == '')
		lasturl = document.location.href;
	while(lasturl.indexOf('&undefined&') > -1 || lasturl.indexOf(' ') > -1
		|| lasturl.indexOf('city_code') > -1 || lasturl.indexOf('city') > -1
		|| lasturl.indexOf(' ') > -1){
		
		if(lasturl.indexOf('city_code') > -1){
			var top = lasturl.split('city_code')[0];
			var next = lasturl.split('city_code')[1].split("&")[1];
			lasturl = top + next;
		}
		if(lasturl.indexOf('&undefined&') > -1){
			lasturl = lasturl.replace("&undefined&","");
		}
		/**
		if(lasturl.indexOf('undefined') > -1){
			lasturl = lasturl.replace("undefined","");
		}
		*/
		if(lasturl.indexOf(' ') > -1){
			lasturl = lasturl.replace(" ","");
		}
		if(lasturl.indexOf('city') > -1){
			var top = lasturl.split('city')[0];
			var next = lasturl.split('city')[1].split("&")[1];
			lasturl = top + next;
		}
	}
	window.location.href = lasturl + "&city_code=" + code + "&city=" + city;
}
</script>
</html>

後臺方法只做跳轉頁面,這裡就不做展示了

頁面B 效果圖


要點分析:

1. 城市列表:

(城市列表為資料庫儲存,儲存結構包含  城市名,城市名首字母。)

只在右邊顯示出現城市的首字母

由於查詢列表sql中沒有加入排序,須在前端進行排序

只顯示城市的首字母:

//有序無重複字母列表
	var sort_first_zm = [];
	var j = 0;
	
	<c:forEach var="t" items="${belongList}">
		var ishave = false;
		for(var i = 0; i < sort_first_zm.length;i++){
			if(sort_first_zm[i] == '${t.city_first_zm}'){
				ishave = true;
				break;
			}
		}
		if(!ishave){
			sort_first_zm[j] = '${t.city_first_zm}';
			j++;
		}
	</c:forEach>
	//排序賦值
	sort_first_zm = sort_first_zm.sort();
	//fruits.sort();  
	//fruits.reverse(); 
	
	//console.log(document.getElementById("data"));
	//開始進行有序顯示
	for ( var zm in sort_first_zm) {
		
		var now_zm = sort_first_zm[zm];
		var show_zm = sort_first_zm[zm];
		//為字母列表賦值
		var float_text = "<a href='#";
		var insert_float = document.getElementById("float_table").insertRow(document.getElementById("float_table").rows.length);
		if(now_zm == '')
			now_zm = "#";
		float_text += now_zm + "'>" + now_zm;
		float_text += "</a>";
		insert_float.insertCell(0).innerHTML = float_text;
		
		//為城市列表賦值
		var text = "<a name='" + now_zm + "'>" + now_zm + "</a>";
		var insert = document.getElementById("data").insertRow(document.getElementById("data").rows.length);
		insert.insertCell(0).innerHTML = text;
		
		<c:forEach var="li" items="${belongList}">
			//console.log('${li.city_desc}');
			if(show_zm == '${li.city_first_zm}'){
				var insert = document.getElementById("data").insertRow(document.getElementById("data").rows.length);
				insert.insertCell(0).innerHTML = '<span onclick="gotoLast(${li.city_code},\'${li.city_desc}\');">${li.city_desc}</span>';
				//insert.insertCell(1).innerHTML = '字母   ${li.city_first_zm}';
			}
		</c:forEach>
	}
首先將所有城市的首字母拿出來,並在迴圈中做去重,剩下的就是無重複但是無序的首字母了。

接著直接使用js陣列的sort() 排序方法

去重排完序之後,根據該陣列直接將值填充進去就ok了。不過要填充兩個div的內容,還有就是錨點。剩下的就是除錯樣式了。

2. url轉發以及轉發繼續傳遞引數

例如  host +  jianli_jianlilogin.html?authtype=resume&partner_id=2&debug=false 這樣的連結

下發到 B 頁面時&後面會被截斷

應對方法

"belong_getSelect.action?type=social&partner_id=${partner_id}&last_url=" + encodeURIComponent(document.location.href);

使用這種方式  encodeURIComponent

在B頁面直接使用struts堆疊顯示正常,但是js中獲取後  連結變為:

jianli_jianlilogin.html?authtype=resume&amp;partner_id=2&amp;debug=false

注意當中多出來的amp;   ,不是想要的結果。。。。。

應對方法:

 在頁面中新增input  隱藏框,存入連結,在js中取出