实验:servlet和jsp数据交互四:表单和超链接
作者:强官涛   类型:Web前端    类别:实验   日期:2017-12-08    阅读:2029 次   消耗积分:0 分

“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的一般使用,敬请期待。

 

 


蜗牛学院,只为成就更好的你!

你!敢不敢!用你三个月的时间,换你不一样的未来!

赶快关注蜗牛学院官方微信,了解更多信息吧!

20181009_153045_341.jpg

版权所有,转载本站文章请注明出处:蜗牛学院在线课堂, http://www.woniuxy.com/note/25
上一篇: 资讯:2016年西华师范大学实训宣讲会
下一篇: 资讯:蜗牛学院16期班开班仪式
提示:登录后添加有效评论可享受积分哦!