struts標籤以及url下發下一個url帶引數
阿新 • • 發佈：2019-02-16
頁面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&partner_id=2&debug=false
注意當中多出來的amp; ，不是想要的結果。。。。。
應對方法：
在頁面中新增input 隱藏框，存入連結，在js中取出