多條件查詢 仿淘寶URL傳參方式
阿新 • • 發佈：2018-12-30
最近專案在做一個電商網站，網站涉及到前後臺互動的多條件查詢，類似於淘寶的多條件查詢，圖片如下
此類查詢主要涉及到的問題有：
1.如何記憶查詢引數
2.如何前後臺傳值
3.中文處理
。
解答：
1：通過從後臺返回之前查詢引數（網上有在session中記憶引數，也有用陣列記憶，這裡我選用了淘寶的方式：url返回引數記憶）
2：通過url方式傳值，並且需要注意拼接格式
3：前臺進行utf8編碼，後臺進行utf8解碼（特別注意：之前記憶的引數通過後臺再返回前臺，一定要對引數進行解碼在編碼後進行返回，否則會出現亂碼，不過也有可能是我程式碼的問題）
詳細程式碼如下：
一、前臺查詢框展示程式碼：（查詢條件都是從後臺拉取的集合）
<div class = "category"> <div> <c:if test="${param.name ne null }">${param.name }</c:if> <a ><c:if test="${requestScope.content eq '' or requestScope.content eq null }"><h3> 全部商品 - 商品篩選</h3></c:if> <c:if test="${requestScope.content ne '' and requestScope.content ne null }"> <h3> ${requestScope.content } - 商品篩選</h3></c:if></a> </div> <!-- <dl style=" border-color: #E2E2E2; border-image: none; border-width: 0 1px 1px;width: 900px;padding-left: 10px; padding: 10px;" id="manyC" class="manyC"> --> <ul class="select"> <li class="select-list"> <c:forEach items="${typePropertys }" var="pro" varStatus="stat" begin="0" end="20"> <dl id="select${stat.index+1}"> <dt style="float:left;">${pro.propertyName }：</dt> <dd class="select-all selected"> <a href="javascript:void(0);" onclick="quanbu(${stat.index})">全部</a></dd> <c:forEach items="${fn:split(pro.content,\",\") }" var="proName" varStatus="stat2"> <dd> <a id="${stat.index}${stat2.index}" href="javascript:void(0);" onclick="bb(${stat.index},${stat2.index},'${proName }')">${proName }</a> </dd> </c:forEach> </dl> </c:forEach> </li> </ul> <%--通過記憶的property來重新整理頁面時顯示之前已篩選的property --%> <script type="text/javascript"> var propertystring = '<%=request.getAttribute("property")%>'; <%--","拆分字串，一級拆分 --%> var arg1 = propertystring.split(","); for(var i=0 ; i<arg1.length ; i++){ <%--":"拆分字串，二級拆分 --%> var arg2 = arg1[i].split(":")[0]; $("#"+arg2).parent().addClass("selected").siblings().removeClass("selected"); } </script> </div>
二、涉及到的JS方法（重點）
顯示之前記憶的查詢條件
<script type="text/javascript"> var propertystring = '<%=request.getAttribute("property")%>'; <%--","拆分字串，一級拆分 --%> var arg1 = propertystring.split(","); for(var i=0 ; i<arg1.length ; i++){ <%--":"拆分字串，二級拆分 --%> var arg2 = arg1[i].split(":")[0]; $("#"+arg2).parent().addClass("selected").siblings().removeClass("selected"); } </script>
點選新的查詢條件事件
<script type="text/javascript">
function bb(num,con,proname){
proname = encodeURI(proname);
proname = encodeURI(proname);
var propertystring = '<%=request.getAttribute("property")%>';
var newstring = "";
var notnullstring = "";
var flag = 0;
if(propertystring != "null" && propertystring != ""){
var arg1 = propertystring.split(",");
<%-- 當選擇同行時，進行修改，當選擇不同行時，先判斷整個for迴圈中有無同行，迴圈完無同行新增--%>
for(var i=0 ; i<arg1.length ; i++){
var arg2 = arg1[i].split(":")[0].split("")[0];
//在同一排時，替換同一排，標誌位置為1，否則為新增，標誌位為0
if(parseInt(arg2) == parseInt(num)){
var newId = num+''+con;
arg1[i] = newId + '' + ":" + proname;
flag = 1;
}
}
for(var j=0 ; j<arg1.length ; j++){
if(j==0){
notnullstring += arg1[j];
}
else{
notnullstring += ","+arg1[j];
}
}
if(flag == 0){
var newId = num+''+con;
newstring = ","+newId + '' + ":" + proname;
notnullstring += newstring ;
}
window.location.href = "<%=path %>/list/goodsList.html?sellType=1&order=0&pageNo=0&orderType=0&goodsCatId=<%=request.getAttribute("property")%>&property="+notnullstring;
}
else{
newstring = num+''+con+":"+proname;
window.location.href = "<%=path %>/list/goodsList.html?sellType=1&order=0&pageNo=0&orderType=0&goodsCatId=<%=request.getAttribute("property")%>&property="+newstring;
}
}
function quanbu(num){
var notnullstring = "";
var propertystring = '<%=request.getAttribute("property")%>';
var flag = 0;
for(var i=0 ; i<arg1.length ; i++){
var arg2 = arg1[i].split(":")[0].split("")[0];
if(parseInt(arg2) == parseInt(num)){
arg1[i] = "";
}
}
for(var j=0 ; j<arg1.length ; j++){
if(j==0){
if(arg1[j] == ""){
notnullstring += "";
flag = 1;
}
else
notnullstring += arg1[j];
}
else{
if(arg1[j]=="")
notnullstring += "";
else {
if(flag == 0)
notnullstring += ","+arg1[j];
else {
notnullstring += arg1[j];
flag = 0;
}
}
}
}
window.location.href = "<%=path %>/list/goodsList.html?sellType=1&order=0&pageNo=0&orderType=0&goodsCatId=<%=request.getAttribute("property")%>&property="+notnullstring;
}
</script>這裡href呼叫的事html頁，而html頁有<s:action>方法，所以直接可以訪問方法
三、後臺方法
</pre><pre name="code" class="java"> if (property != null && !(property.equals(""))) {
String[] arg1 = property.split(",");
for (int i = 0; i < arg1.length; i++) {
String[] arg2 = arg1[i].split(":");
String beforeNum = arg2[0];
String afterText = URLDecoder.decode(
URLDecoder.decode(arg2[1], "utf-8"), "utf-8");
if(i<arg1.length-1){
ex_property += afterText + ",";
ex_propertyNum += beforeNum+",";
}
else {
ex_property += afterText;
ex_propertyNum += beforeNum;
}
}
String[] ex_arg1 = ex_property.split(",");
String[] ex_arg2 = ex_propertyNum.split(",");
for (int j = 0; j < ex_arg1.length; j++) {
if(j<ex_arg1.length-1)
return_property += ex_arg2[j]+":"+URLEncoder.encode(
URLEncoder.encode(ex_arg1[j], "utf-8"), "utf-8")+",";
else
return_property += ex_arg2[j]+":"+URLEncoder.encode(
URLEncoder.encode(ex_arg1[j], "utf-8"), "utf-8");
}
ServletActionContext.getRequest().setAttribute("property",
return_property);
}這裡return_property 為 需要重新返回到前臺記憶的引數，ex_property為已解碼的查詢引數。
最後是CSS和相對不重要的JS
這裡寫死了點選樣式條件數為7個....還不清楚如何動態確定點選樣式
$(document).ready(function(){
$("#select1 dd").click(function () {
$(this).addClass("selected").siblings().removeClass("selected");
if ($(this).hasClass("select-all")) {
$("#selectA").remove();
} else {
var copyThisA = $(this).clone();
if ($("#selectA").length > 0) {
$("#selectA a").html($(this).text());
} else {
$(".select-result dl").append(copyThisA.attr("id", "selectA"));
}
}
});
$("#select2 dd").click(function () {
$(this).addClass("selected").siblings().removeClass("selected");
if ($(this).hasClass("select-all")) {
$("#selectB").remove();
} else {
var copyThisB = $(this).clone();
if ($("#selectB").length > 0) {
$("#selectB a").html($(this).text());
} else {
$(".select-result dl").append(copyThisB.attr("id", "selectB"));
}
}
});
$("#select3 dd").click(function () {
$(this).addClass("selected").siblings().removeClass("selected");
if ($(this).hasClass("select-all")) {
$("#selectC").remove();
} else {
var copyThisC = $(this).clone();
if ($("#selectC").length > 0) {
$("#selectC a").html($(this).text());
} else {
$(".select-result dl").append(copyThisC.attr("id", "selectC"));
}
}
});
$("#select4 dd").click(function () {
$(this).addClass("selected").siblings().removeClass("selected");
if ($(this).hasClass("select-all")) {
$("#selectD").remove();
} else {
var copyThisD = $(this).clone();
if ($("#selectD").length > 0) {
$("#selectD a").html($(this).text());
} else {
$(".select-result dl").append(copyThisD.attr("id", "selectD"));
}
}
});
$("#select5 dd").click(function () {
$(this).addClass("selected").siblings().removeClass("selected");
if ($(this).hasClass("select-all")) {
$("#selectE").remove();
} else {
var copyThisE = $(this).clone();
if ($("#selectE").length > 0) {
$("#selectE a").html($(this).text());
} else {
$(".select-result dl").append(copyThisE.attr("id", "selectE"));
}
}
});
$("#select6 dd").click(function () {
$(this).addClass("selected").siblings().removeClass("selected");
if ($(this).hasClass("select-all")) {
$("#selectF").remove();
} else {
var copyThisF = $(this).clone();
if ($("#selectF").length > 0) {
$("#selectF a").html($(this).text());
} else {
$(".select-result dl").append(copyThisF.attr("id", "selectF"));
}
}
});
$("#select7 dd").click(function () {
$(this).addClass("selected").siblings().removeClass("selected");
if ($(this).hasClass("select-all")) {
$("#selectG").remove();
} else {
var copyThisF = $(this).clone();
if ($("#selectG").length > 0) {
$("#selectG a").html($(this).text());
} else {
$(".select-result dl").append(copyThisG.attr("id", "selectG"));
}
}
});
$("#selectA").live("click", function () {
$(this).remove();
$("#select1 .select-all").addClass("selected").siblings().removeClass("selected");
});
$("#selectB").live("click", function () {
$(this).remove();
$("#select2 .select-all").addClass("selected").siblings().removeClass("selected");
});
$("#selectC").live("click", function () {
$(this).remove();
$("#select3 .select-all").addClass("selected").siblings().removeClass("selected");
});
$("#selectD").live("click", function () {
$(this).remove();
$("#select4 .select-all").addClass("selected").siblings().removeClass("selected");
});
$("#selectE").live("click", function () {
$(this).remove();
$("#select5 .select-all").addClass("selected").siblings().removeClass("selected");
});
$("#selectF").live("click", function () {
$(this).remove();
$("#select6 .select-all").addClass("selected").siblings().removeClass("selected");
});
$("#selectG").live("click", function () {
$(this).remove();
$("#select7 .select-all").addClass("selected").siblings().removeClass("selected");
});
$(".select dd").live("click", function () {
if ($(".select-result dd").length > 1) {
$(".select-no").hide();
} else {
$(".select-no").show();
}
});
});.select li{list-style:none;padding:10px 0 5px 0px}
.select .select-list{border-bottom:#eee 1px dashed}
.select dl{zoom:1;position:relative;line-height:24px;}
.select dl:after{content:" ";display:block;clear:both;height:0;overflow:hidden}
.select dd{float:left;display:inline;margin:0 0 5px 5px;}
.select a{display:inline-block;white-space:nowrap;height:24px;padding:0 10px;text-decoration:none;color:#039;border-radius:2px;}
.select a:hover{color:#f60;background-color:#f3edc2}
.select .selected a{color:#fff;background-color:#CCCCCC}
.select-result dt{font-weight:bold}
.select-no{color:#999}
.select .select-result a{padding-right:20px;background:#f60 url("../img/close.gif") right 9px no-repeat}
.select .select-result a:hover{background-position:right -15px}