|
有时希望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);
}
| 
转播
