JSP 页面通常嵌入 JS 代码,且 JS、JSP之间需要相互使用一些变量的值,但JSP代码在服务器运行、JS代码在客户端浏览器运行,所以涉及到JS和JSP值传递问题。其交互方式如下:
1.JS使用JSP中的变量
1
2
3
|
<%
String test =
"I am testing !"
; // JSP片段中定义变量
%>
|
1
2
3
4
|
<SCRIPT LANGUAGE =
"JavaScript"
>
var tmp =
"<%=test %>"
; // 通过
"<%=javaCode %>"
引用jsp中的变量、方法等,注意:一定要加双引号
alert(tmp);
</SCRIPT >
|
2.JSP使用JS中的变量
由于JSP代码在服务器运行,无法直接使用客户端的JS代码中的变量。需先把客户端的变量提交到服务器,服务器再接收该变量。
案例如下:将a.jsp页面JS代码段的变量提交到服务器,JSP片段再获取该变量。
-- 以下是JSP中HTML代码,用于将JS中变量存储到隐藏控件中
1
2
3
4
|
<!
-- 在form中设置隐藏控件,用来存储JS中的值 -->
<form
name
=
"frmApp"
action
=
"a.jsp"
id=
"frmAppId"
mothed=
"post"
/>
<input id=
"test"
type=
"hidden"
name
=
"test"
>
</form>
|
-- 以下是JSP中JS代码,通过表单将提交本页面(隐藏控件将被提交到服务器)
1
2
3
4
5
6
7
8
9
10
11
|
<script language=
"javascript"
>
function
setItemValue(){
var tmp =
"testing"
;
document.getElementById(
"test"
).value = tmp; // 将JS变量值存储到隐藏控件中
}
function
submit(){
var frm = document.getElementById(
"frmAppId"
); // 获取表单
frm.submit(); // 对表单进行提交
}
</script>
|
-- 以下是a.jsp中在表单进行提交后,对变量进行接收的代码
1
2
3
|
<%
String test = request.getParameter(
"test"
); // test为隐藏控件名
%>
|
注意:通过提交form形式使得JSP能够使用JS变量会刷新本页面,在页面不需要保持状态情况下可以考虑使用。否则,可以通过Ajax进行异步通信。