Jsp頁面get方式傳遞和獲取參數


需求說明:

  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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM