servlet和jsp数据交互四:表单和超链接
该例中的loction是浏览器对象,使用该提交方式会默认提交到和当前页面同目录的jsp或者servlet,而一般情况下,servlet和jsp不会在同一个目录中,直接给出绝对路径,可以解决这个问题。Servlet中的取值方式和例一一样。
“Servlet和Jsp数据交互”前三篇博客介绍了Servlet向Jsp传值和在jsp页面处理和显示数据的方法。传值的载体一般使用HttpServletRequest对象,页面处理一般使用EL表达式和JSTL标签。Jsp页面中不建议使用scriptlet(JAVA脚本)。从第四期博客开始,给大家介绍Jsp页面向Servlet传值的常见方式和在Servlet中取值和处理一般方法。页面向后台传值,一般使通过提交请求的方式,常见的有form表单提交,超链接href方式提交,ajax提交。下面就介绍表单提交和超链接提交。
例一:表单提交
若要使用表单提交,必须在页面上添加html的<form>(表单)标签,其代码如下。
<form id="formid" action="receiveTest" method="get" >
<input type="text" id="name" name="uname" />
<input type="password" id="pass" name="pass" />
<input type="submit" id="sub" />
</form>
id是表单的一个属性,在整个html文件中,所有标签的id属性值不可以相同,所以它可以作为标签的唯一标识;action的值指定表单提交的目标位置,这里给出的是servlet的url-pattern值,该值可以在web.xml文件中查看到;method属性的值指定表单的提交方式,取值范围是get或者post;另外,表单控件中需要有一个表单提交按钮,点击它可以触发表单提交的操作。如果在form标签的属性中存在onsubmit="return checkForm()",那么点击提交按钮不会直接提交表单,而是触发执行js中的checkForm函数,如果函数的返回值为不为false,那么表单会提交,否则取消表单提交操作。Servlet中取表单提交的数据方法如下。
// 取表单数据 String name = request.getParameter("uname"); //取表单提交的用户名 String pass = request.getParameter("pass"); // 取表单提交的用户密码 |
注意:request.getParameter("uname")方法的参数值必须和页面表单控件的name属性值一致。注意,该方法的返回值是String类的对象。
表单提交除了使用提交按钮的方式,还可以使用“事件+js函数”的方式提交。例如我们把上例中表单控件的最后一个input标签的type属性修改为button(按钮),页面显示的就会是一个普通的按钮,而不是提交按钮。对普通按钮的点击操作不会触发表单提交。这里,需要使用普通按钮的点击事件(onclick事件)触发执行js函数,然后在js函数中调用form表单的submit()方法提交表单。使用方式如下:
标签代码: <input type="button" id="jsSub" value="表单js提交" onclick="formSubmit()"/> Js函数: // form表单js提交 function formSubmit(){ alert("表单js提交"); var fm = document.getElementById("formid"); //取表单对象 fm.submit(); // 提交表单 } |
例二:超链接提交
超链接方式提交需要使用html的<a>(超链接标签),代码如下:
<a href="receiveTest?age=23">超链接提交</a> |
超链接的href属性是常用属性,它指定点击超链后请求提交的目标地址。其中receiveTest表示目标Servlet;age表示参数名,23是参数age的值;“超链接提交”是页面显示的文字信息。Servlet中取值的方式和例一中相同。超链接的这种使用方式显得很呆板,一般用来给传输固定的参数。超链接除了跳转功能外,还可以用来执行js函数,而js允许用户执行提交操作,如下面的例子
页面标签: <a href="javascript:jsSubmit()">超链接执行js函数</a> Js代码: // js执行提交 function jsSubmit(){ var name = "赏金猎人"; // 传age和name信息 var href = "http://127.0.0.1:5881/WnShoppingCar/receiveTest? "age=23" + "&name=" + name ; location.href = href; // 提交请求 } |
该例中的loction是浏览器对象,使用该提交方式会默认提交到和当前页面同目录的jsp或者servlet,而一般情况下,servlet和jsp不会在同一个目录中,直接给出绝对路径,可以解决这个问题。Servlet中的取值方式和例一一样。
使用表单提交或者超链接方式提交,页面都会刷新,如果不想刷新页面,需要使用ajax提交方式。下期博客将介绍ajax的一般使用,敬请期待。
蜗牛学院,只为成就更好的你!
你!敢不敢!用你三个月的时间,换你不一样的未来!
赶快关注蜗牛学院官方微信,了解更多信息吧!