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

posted @ 2018-01-15 11:04  依依大脚丫  阅读(9284)  评论(0编辑  收藏  举报