[Java] JSP入门教程2

博客首页 » Java JSP入门教程2

发布于 03 Jul 2015 16:57
标签 blog
逐步讲解JSP入门的内容

浏览器的输出

我们先看一下浏览器的输出。
浏览器得到的HTML输出页面如下,混杂了JavaScript略微有些复杂,所以我们先把JavaScript去掉了:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
</head>
<body>
 
请输入打招呼的次数:
<form action="test.jsp">
    <!-- 次数的栏 -->
    <input id="times" name="times" value="3"/>
    <!-- 提交按钮 -->
    <input type="submit" value="提交"/>
</form>
 
<p/>
你好 1<br/>
你好 2<br/>
你好 3<br/>
 
</body>
 
</html>

这个表单,在每次提交时,都会对test.jsp(<form action="test.jsp" …>),提交叫做times的文本(<input name="times" …>)。

服务器端的处理

服务器的处理分成三个部分,一部分是解析参数,第二部分是生成中间结果,第三部分是输出到HTML上。

第一部分,对于表单提交上来的内容,通过request.getParameter("times"),得到参数times的字符串,再通过 Integer.parseInt 得到数字的次数。

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%
 
//取得参数
String timesStr = request.getParameter("times");
//定义默认次数
int timesInt = 3;
//如果非空
if (timesStr != null) {
    //解析参数
    timesInt = Integer.parseInt(timesStr);
}
 
%>

第二部分,通过对timesInt的循环,在hellos这个数组里,生成中间结果。

//准备显示结果
//定义数组储存结果
String[] hellos = new String[timesInt];
//填充内容
for (int i = 0; i < timesInt; i ++) {
    hellos[i] = "你好 " + i;
}
//设定到相应对象的属性中
request.setAttribute("hellos", hellos);

第三部分对hellos这结果数组循环,把里面的值都输出到html上。

<% 
//对于结果循环
String[] helloArr = (String[])request.getAttribute("hellos");
for (int i = 0; i < helloArr.length; i ++) {
    //输出数组的每一个元素
    out.println(helloArr[i] + "<br/>");
}
%>

JavaScript的控制

通过在<form>标签的onSubmit属性上添加return validateSubmit(this),在每次按提交的时候,就会调用validateSubmit来验证。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
</head>
<body>
 
请输入打招呼的次数:
<!-- 定义表单 action是提交到的页面 onSubmit当表单提交时,预先执行一段JavaScript -->
<form action="test.jsp" onSubmit="return validateSubmit(this)">
    <!-- 次数的栏 -->
    <input id="times" name="times" value="<%= timesInt %>"/>
    <!-- 提交按钮 -->
    <input type="submit" value="提交"/>
</form>
 
<p/>
 
</body>
<script>
//JavaScript 检查表单数据
function validateSubmit(form) {
    //取得输入
    var timesInput = document.getElementById('times');
    //取得其中的值
    var value = timesInput.value;
    //检查是否为数字
    if (!value.match(/^\d+$/g)) {
        //当不是数字时,提示需要输入数字
        alert('Please enter a number');
        //返回false,阻止表单提交
        return false;
    }
    //否则正常返回
}
</script>
</html>

本页面的文字允许在知识共享 署名-相同方式共享 3.0协议和GNU自由文档许可证下修改和再使用,仅有一个特殊要求,请用链接方式注明文章引用出处及作者。请协助维护作者合法权益。


系列文章

文章列表

  • Java JSP入门教程2

这篇文章对你有帮助吗,投个票吧?

rating: 0+x

留下你的评论

Add a New Comment