前端、后端、和js脚本数据交互

1、servlet传参数到jsp页面
- 1.1 servlet页面发送参数
- 1.2 jsp页面接收参数
2、jsp页面传参数给servlet
- 2.1 jsp页面提交参数
- - 2.1.1 特殊类型type=image值的获取
- 2.2 servlet页面接收参数
3、js和servlet交互
- 3.1 js使用java变量
- 3.2 java使用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>

servlet传参给jsp和js与java变量互传（废弃,建议JSP开发使用jstl）相关推荐

java处理表单变量_jsp处理表单及JS和JAVA变量互传
1:超连接跳转我们在超连接的时候,常常连接到一个jsp或者Action,比如: XXX 这样做会有一个问题:在test.jsp中,除你传递的param1和param2参数外,你用request.ge ...
组件传参的终极版，事件车，父子传参的祖宗。
如果简单的组件传参父子,子父传参就够了,但是如果兄弟之间传参就比较麻烦了, 事件车. 最后的还可以关闭监听消息@click="$root.$off('msg1')
转 java c++互传arraylist
Java JNI由浅入深(包括:Java和C++互传ArrayList泛型对象参数) 2010-11-25 09:57 1694人阅读评论(1) 收藏举报我们知道Java是一个运行在虚拟机里面的 ...
富士相机设置传原图_富士X-S10相机传图必看！原创完美解决PC互传图片问题
富士X-S10相机传图必看!原创完美解决PC互传图片问题 2020-11-28 17:03:04 18点赞 28收藏 23评论创作立场声明:原创首发分享,实用技巧希望推荐好文! 最近入手了富士X-S ...
多人上传文件公共网盘_多平台文件互传，一篇就够
今天来聊聊跨平台文件传输. 我们在工作,学习中经常会遇到多平台文件互传问题,每个人都有自己的巧妙解决办法,小点的文件可能会选择使用 QQ/微信进行传输,大一些的文件可以使用数据线,U 盘,网盘等方式传 ...
函数传参和实际应用—JS学习笔记2015-6-5（第49天）
函数传递参数参数=JS的数据类型=>数字.字符串.布尔.函数.对象.未定义传递有名字的函数,直接传递函数名就可以了. fn1(100, 'px'); function fn1(a, b){/ ...
函数传参之商品价格计算—JS学习笔记2015-6-6（第50天）
经常我们可以看到很多网站会有多个相同功能的模块,比如淘宝首页的轮播,比如新浪首页的tab切换: 那么可以看出这些地方在HTML结构上是类似的,所以我们可以考虑用一块功能代码去实现,而不同是仅仅是传递参 ...
python中两个文件如何互相传参_argparse模块如何在jupyter notebook中用于传参？
作者:于晨晨研究方向:nlp 发表于公众号:AI技术日常在python代码文件中,通常需要传参,传参就需要经常使用argparse.使用argparse模块在py文件中是正常的,但是jupyter ...
@query传参_前端框架vue中query和params传参
注意(用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空.(传参强烈建议适用string)) 也可以选用sessionstorage/loc ...

servlet传参给jsp和js与java变量互传（废弃,建议JSP开发使用jstl）