前端、后端、和js脚本数据交互
前言:最近在做javaweb项目,前端和后端的数据常有交互。前端位于客户端(浏览器),后端位于服务器,jsp和servlet的交互还好,js和servlet的交互就点绕,现在刚做完一部分内容,来总结一些方法。
1、servlet传参数到jsp页面
1.1 servlet页面发送参数
首先servlet要传参数到jsp页面,可以使用request请求转发方式,转发方法是由服务器转发的,和java同属于后端。如:
// servlet.java
request.getRequestDispatcher("../index.jsp").forward(request, response);
servlet发送参数,把值保存在request.setAttribute(key,值)中。如:
int val = 1024;
int[] iA = {70,80,99}
String[] sA = {"d","c","b","a"};
request.setAttribute("val1", "china");
request.setAttribute("val2", val);
request.setAttribute("iA",iA); //整形 数组
request.setAttribute("sA",sA); //字符串 数组
1.2 jsp页面接收参数
jsp页面接收servlet参数,使用request.getAttribute()取参数。如:
// JSP.jsp
<%
String val1 = ""; //初始化
//最好有判空操作,取值会出异常,其他ArrayList<>等数组也要有判空。
if(request.getAttribute("val1") != null) {
val1 = (String)request.getAttribute("val1");
}
int val2 = -1; //初始化
if(request.getAttribute("val2") != null) {
val2 = (int)request.getAttribute("val2");
}
int[] iA = new int[5]; //初始化,必须有长度,长度也可从servlet传一个变量过来
if (request.getAttribute("iA") != null) {
iA = (int[])request.getAttribute("iA");
}
String[] sA = new String[10]; //初始化,必须有长度
if (request.getAttribute("sA") != null) {
sA = (String[])request.getAttribute("sA");
}
%>
<body>
<h1>view</h1>
<hr>
val1=<%=val1 %><br>;
val2=<%=val2 %><br>;
sA.length=<%=sA.length %><hr>;
<%
for (int i=0; i<iA.length; i++) {
%>
iA[<%=i%>]=<%=iA[i]%><br>;
<%
}
%>
</body>
2、jsp页面传参数给servlet
2.1 jsp页面提交参数
jsp页面的参数主要通过form表单的action动作来提交数据到servlet类。
表单中通过设置name属性给servlet捕获(name可以重名,如提交checkbox类型的数组参数),servlet会获得value属性里的值。
。如:
<!-- JSP.jsp -->
<body>
<form action="servlet/test1Servlet">
<span>用户名</span>
<input type="text" name="username" value="zhangsan" >
<input type="submit" value="提交"/>
</form>
</body>
2.1.1 特殊类型type=image值的获取
其中type="image"的value是不能被servlet直接拿到的(暂且不明),不过有间接方法可以拿到。
方法:用js代码把image里的值同步设置到一个隐藏的hidden类型里,让servle直接去hidden里的value。(hidden不会出现在页面中,不影响页面布局)如:
<!-- JSP.jsp -->
<form action="servlet/test1Servlet">
<input type="image" name="_image" value="2333" ><!-- 该值获取不到 -->
<input type="hidden" name="_hidden" value="2333" >
<input type="submit" value="提交"/>
</form>
2.2 servlet页面接收参数
servlet使用request.getParameter(“username”)来获取单个参数 (String)。
使用request.getParameterValues(“checkbox”)来获取数组参数 (String[])。如:
String username = request.getParameter("username");
String[] checkbox = request.getParameterValues("checkbox");
3、js和servlet交互
3.1 js使用java变量
js使用java变量非常简单。只要在jsp页面写js代码,用<%=para%>赋值给js即可。如:
// JSP.jsp
<%
String s = "this is my first JS";
%>
// JSP.jsp
function myFunction()
{
alert("<%=s%>");
}
3.2 java使用js的变量
因为js的变量在"<“script”>“…”<“/script”>"中,故java不能直接在jsp页面拿到js的变量。
间接方法:在jsp页面中设置一个hidden类型,在js中把参数传给hidden的value中,让java去拿hidden的value值。如:
<!-- JSP.jsp -->
<%
String s = request.getParameter("submit2"); //此值可以提交到本页,也可以提交到servlet,修改action即可。
%>
<body >
<form action="JSP.jsp" name="myform" method="post" ><!-- 可提交到本页面 -->
<input type="hidden" id="submit" name="submit2" value="">
<!-- <input type="submit" value="提交"/> -->
</form>
</body>
<script type="text/javascript">
var text1 = "123";
document.getElementById("submit").setAttribute("value", text1);
//document.myform.submit();
</script>