需求說明:
1、前端Jsp頁面跳轉時使用get方式傳遞多類型參數(int、String等)。
2、目標頁面通過jQuery函數接收傳遞的參數,並在瀏覽器控制台輸出參數。
代碼部分:
首先模擬一個頁面跳轉的環境:跳轉頁面,目標頁面
1、跳轉頁面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/"; %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="<%=basePath %>js/jquery-3.2.1.min.js"></script> </head> <body> <a href="#" id="urlParam"><h2>Hello</h2></a> <p> <span id="sname">中國</span> <span id="cname">北京</span> <span id="id">123</span> </p> </body> <script type="text/javascript"> $(function(){ $("#urlParam").click(function(){ changeManage($("#sname").text(),$("#cname").text(),$("#id").text()); }) }) function changeManage(sname,cname,id){ window.location.href = "../jsp/TestFile.jsp?id="+id+"&&sname="+sname+"&&cname="+cname; } </script> </html>
2、目標頁面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/"; %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="<%=basePath %>js/jquery-3.2.1.min.js"></script> </head> <body> <h2>Show URL Params</h2> </body> <script type="text/javascript"> $(function(){ var sname = GetQueryString("sname"); var cname = GetQueryString("cname"); var id = GetQueryString("id"); console.log("sname:" + sname); console.log("cname:" + cname); console.log("id:" + id); }) function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null){ return unescape(decodeURI(r[2])); //return unescape(r[2]); } return null; } </script> </html>
3、下面是參數傳遞結果(瀏覽器控制台輸出)
問題說明:
1、在使用的時候發現int類型的參數傳遞和獲取都沒問題。
2、傳遞String類型的數據時,出現亂碼問題。解決方式:將unescape換成decodeURI,原因是瀏覽器對中文參數進行了encodeURI編碼
總結:上面的代碼只是為了下次使用時方便一些,參數解析及解決亂碼的問題,參考了https://www.cnblogs.com/codefly-sun/p/5703818.html