在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 =
newObject();

       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(){}

 

 

<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);

}