在JS中访问JSP Request中的变量

有时希望Jsp实现显示，Js实现前台的逻辑控制，在这个过程中，Js和Jsp之间会需要交互一些变量值，Jsp的页面跳转也可以通过Js来控制。看下面一个例子：

      登录 -> 检查用户名和密码 -> 欢迎页

包含的文件如下：

登录页面：Login.jsp、Login.js

欢迎界面：Welcome.jsp、Welcome.js

Login.jsp：

<script type=”text/javascript” src=”Login.js”></script>

…..//省略部分代码

<form action="home.jsp" method="post">

<table>

       <tbody>

              <tr>

                     <td>UserName:</td>

                     <td><input type="text"  name="username"/></td>

              </tr>

              <tr>

                     <td>Password:</td>

                     <td><input type="text"  name="password"/></td>

              </tr>

              <tr>

                     <td><input type="submit" onclick="doLogin()" value="Login"/></td>

                     <td align="center"><button onclick="doClear()">cancel</button></td>

              </tr>

       </tbody>

       </table>

</form>

 

上面代码中，使用一个表单，发送用户名和密码给后台验证，是通过Js调用业务方法。具体看下面的Js文件。这边Jsp传递的参数，可以在后面的welcome.jsp页面中获取。

Login.js

// doLogin()方法主要是调用业务层的方法判断用户名和密码是否存在，可以登录

function doLogin(){

       var userDto = new Object();

       userDto.name = document.getElementById('username').value;

       userDto.password = document.getElementById('password').value;

       userServiceDwr.login(userDto,{callback:handleLogin,errorHandler:handleLoginError});//此处是调用DWR去后台数据库判断用户是否存在,这边可以是任何的业务逻辑方法。

}

function handleLogin(result){

       if(result){

              window.location.href="Welcome.jsp"; //登录成功后跳转到欢迎页

       } else {

              document.getElementById('errorMsg').innerHTML = 'login failed,please check the username and password.';

       }

}

function doClear(){

       document.getElementById('username').value='';

       document.getElementById('password').value='';

}

function handleLoginError(){}

 

Welcome.jsp

<script>

       function getUserName(){

              var username = '<%=request.getParameter("username")%>';

              alert(username); //弹出框显示Login.jsp中传来的username值

}

</script>

<div class="content">

       <div id="welcomeDiv" style="padding-top:30px;">

              <div>welcome <%= request.getParameter("username") %></div>

              <button onclick="getUserName()">click here to get user name.</button>

       </div>

</div>

 

上面的代码，在JS代码片段中，通过<%=request.getParameter("username")%> 访问了Login.jsp中表单传递过来的username属性的值，这样的操作上没有问题的。如果想要把getUserName()方法放在一个单独的Js中，如Welcome.js，也就是不在Jsp文件中插入Js代码。用普通的<script type=”text/javascript” src=” Welcome.js”></script>方式引入JS文件是无法访问，代码如下：

<script type=”text/javascript” src=”Welcome.js”></script>

…..//省略部分代码

 

<div class="content">

       <div id="welcomeDiv" style="padding-top:30px;">

              <div>welcome <%= request.getParameter("username") %></div>

              <button onclick="getUserName()">click here to get user name.</button>

       </div>

</div>

 

Alert弹出的内容是：'<%=request.getParameter("username")%>'，也就是说把上面这段代码当成了字符串，没有解析它。要想让单独的Js文件中的方法也能解析出'<%=request.getParameter("username")%>',需要换一种JS的引入方法，代码如下

<script type="text/javascript" > <%@ include file=".Welcome.js"%> </script>

…..//省略部分代码

 

<div class="content">

       <div id="welcomeDiv" style="padding-top:30px;">

              <div>welcome <%= request.getParameter("username") %></div>

              <button onclick="getUserName()">click here to get user name.</button>

       </div>

</div>

用上面这种方式，点击Button弹出来的内容就是Login.jsp中传过来的username的值。

 

Welcome.js

function getUserName(){

       var username = '<%=request.getParameter("username")%>';

       alert(username);

}