第4章:JSP 程序设计实战——for、if、动态表格与 99 乘法表

一、前言

很多同学学到 JSP 第3章时,会觉得自己已经会了:

  • 能写 <% %>

  • 能写 <%= %>

  • 能定义变量

  • 能输出变量

但一到真正做题时,立刻就卡住:

  • for 循环到底写在哪?

  • 为什么 HTML 标签总是要"断开写"

  • 表格怎么一边循环一边输出

  • if 判断到底是控制页面显示还是控制 Java 逻辑

  • 表单传过来的数据怎么参与循环

这其实说明一个问题:

你会的是"语法",但还不会"把语法拿来做页面程序"。

所以这一章的任务就是:

  • if

  • for

  • 把表单参数

  • 把 HTML 表格

这四样东西真正拼起来。

这一章学完后,你应该能独立完成这类最典型的课程题:

  1. JSP 输出 9×9 表格

  2. JSP 输出 9×9 乘法表

  3. 输入两个数并显示结果

  4. 输入行列数动态打印表格

  5. 输入姓名和行列数,提交后显示姓名并生成表格

这几乎就是《网络程序设计》入门阶段最核心的一批程序题。


二、为什么 JSP 做题总是"Java 一段、HTML 一段"

先看一个常见写法:

复制代码
<%
for(int i = 1; i <= 3; i++){
%>
    <h2>第 <%= i %> 行</h2>
<%
}
%>

很多新手第一眼会觉得很别扭:

  • 为什么 for 没写完整

  • 为什么中间突然跳出去写 HTML

  • 为什么后面又跳回来写 }

其实原因很简单:

1. for 是 Java 代码

所以必须写在:

复制代码
<% %>

里面。

2. <h2> 是 HTML 标签

它不是 Java 语句,所以不能直接写在 Java 代码块里。

3. i 是变量值

要把它显示到页面上,就要用:

复制代码
<%= i %>

所以 JSP 的本质节奏就是:

Java 控制流程

HTML 负责页面结构
<%= %> 负责把值塞进 HTML

这正是 JSP 编程最核心的思维方式。


三、JSP 中 if 判断到底怎么用

先从最简单的 if 开始。

1. 基本写法

复制代码
<%
    int age = 20;
    if(age >= 18){
%>
    <h2>成年人</h2>
<%
    }else{
%>
    <h2>未成年人</h2>
<%
    }
%>

2. 运行逻辑分析

第一步

<% %> 中定义变量 age

第二步

if(age >= 18) 进行判断

第三步

如果条件成立,就输出:

复制代码
<h2>成年人</h2>

否则输出:

复制代码
<h2>未成年人</h2>

3. 为什么不能直接这样写

很多人会想写成:

复制代码
<%
if(age >= 18){
    <h2>成年人</h2>
}
%>

这是错的。

因为:

  • <h2>成年人</h2> 不是 Java 代码

  • 它不能直接放在 Java 代码块内部

所以你必须"跳出" <% %> 再写 HTML。


4. if 最常见的用途

在 JSP 里,if 通常用于:

  • 判断用户输入是否为空

  • 判断数字是否合法

  • 判断成绩是否及格

  • 判断表单数据是否满足条件

  • 判断是否显示某块页面内容

例如:

复制代码
<%
    String name = request.getParameter("username");
    if(name != null && !name.equals("")){
%>
    <h2>欢迎你:<%= name %></h2>
<%
    }else{
%>
    <h2>用户名不能为空!</h2>
<%
    }
%>

四、JSP 中 for 循环怎么用

JSP 中最重要的循环就是 for

因为:

  • 打印表格用它

  • 打印乘法表用它

  • 打印重复行内容用它

  • 动态生成列表也用它


1. 最基础的 for 输出

复制代码
<%
    for(int i = 1; i <= 5; i++){
%>
    <h3>这是第 <%= i %> 行</h3>
<%
    }
%>

运行效果类似:

复制代码
这是第 1 行
这是第 2 行
这是第 3 行
这是第 4 行
这是第 5 行

2. 为什么输出变量要用 <%= i %>

因为 i 是 Java 变量。

想把它显示到 HTML 页面里,必须通过表达式输出。

如果你只写:

复制代码
<h3>这是第 i 行</h3>

那页面上真的只会显示字母 i,不会自动识别成变量。


五、用 for 输出一个简单表格

先做一个过渡案例:输出一个 3 行 4 列表格。

复制代码
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>3行4列表格</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="8">
<%
    for(int i = 1; i <= 3; i++){
%>
    <tr>
    <%
        for(int j = 1; j <= 4; j++){
    %>
        <td>第<%= i %>行第<%= j %>列</td>
    <%
        }
    %>
    </tr>
<%
    }
%>
</table>
</body>
</html>

1. 代码结构解释

外层循环

复制代码
for(int i = 1; i <= 3; i++)

表示控制 行数

内层循环

复制代码
for(int j = 1; j <= 4; j++)

表示控制 列数

<tr>

每次外层循环开始,输出一行

<td>

每次内层循环执行,输出一个单元格


2. 规律总结

以后你只要看到"画 m 行 n 列表格",脑子里就自动联想到:

  • 外层 for 控制行

  • 内层 for 控制列

  • tr 包住一整行

  • td 是每个单元格

这几乎是固定模板。


六、JSP 输出 9×9 表格

这是课程里最基础、最经典的一题。

1. 题目要求

输出一个 9 行 9 列的表格,每个单元格都显示某个内容。

例如显示 i*j 的结果。


2. 完整代码

复制代码
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>9×9表格</title>
</head>
<body>
<h2>9×9 表格</h2>

<table border="1" cellspacing="0" cellpadding="8">
<%
    for(int i = 1; i <= 9; i++){
%>
    <tr>
    <%
        for(int j = 1; j <= 9; j++){
    %>
        <td><%= i * j %></td>
    <%
        }
    %>
    </tr>
<%
    }
%>
</table>

</body>
</html>

3. 这一题练的是什么

这题不是单纯为了让你画个表格,而是在训练你同时掌握:

  • 双重 for

  • HTML 表格结构

  • JSP 表达式输出

  • Java 逻辑和 HTML 结构结合

所以它特别重要。


七、JSP 输出 9×9 乘法表

这题比"9×9 表格"再进一层,因为它不再是固定 9 列,而是一个三角形结构


1. 效果要求

第一行:

复制代码
1×1=1

第二行:

复制代码
1×2=2   2×2=4

第三行:

复制代码
1×3=3   2×3=6   3×3=9

依次类推,到第 9 行。


2. 完整代码

复制代码
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>9×9乘法表</title>
    <style>
        table { border-collapse: collapse; }
        td { border: 1px solid #333; padding: 6px 10px; text-align: center; }
    </style>
</head>
<body>

<h2>9×9乘法表</h2>

<table>
<%
    for(int i = 1; i <= 9; i++){
%>
    <tr>
    <%
        for(int j = 1; j <= i; j++){
    %>
        <td><%= j %> × <%= i %> = <%= i * j %></td>
    <%
        }
    %>
    </tr>
<%
    }
%>
</table>

</body>
</html>

3. 为什么这里内层循环是 j <= i

这是关键。

如果写:

复制代码
for(int j = 1; j <= 9; j++)

那每一行都是 9 列,变成矩形表格了。

而乘法表要求:

  • 第1行 1列

  • 第2行 2列

  • 第3行 3列

  • ...

  • 第9行 9列

所以内层循环必须写:

复制代码
for(int j = 1; j <= i; j++)

这里的 i 就决定了当前行该有多少列。


4. 这题的意义

这题在课程里很经典,因为它训练的是:

  • 双重循环的控制关系

  • "外层控制行,内层控制当前行列数"的思想

  • 表格结构的动态生成

你后面做很多题,本质都是这个模型的变种。


八、输入两个数字并求和显示

这一题开始把 表单 + request + JSP 输出 串起来。


1. 输入页面 input.jsp

复制代码
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>输入两个数字</title>
</head>
<body>
<h2>请输入两个数字</h2>

<form action="sum.jsp" method="post">
    第一个数:<input type="text" name="num1"><br><br>
    第二个数:<input type="text" name="num2"><br><br>
    <input type="submit" value="求和">
</form>

</body>
</html>

2. 结果页面 sum.jsp

复制代码
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    request.setCharacterEncoding("UTF-8");

    String s1 = request.getParameter("num1");
    String s2 = request.getParameter("num2");

    int num1 = 0;
    int num2 = 0;
    int sum = 0;

    try{
        num1 = Integer.parseInt(s1);
        num2 = Integer.parseInt(s2);
        sum = num1 + num2;
%>
        <h2>两个数的和是:<%= sum %></h2>
<%
    }catch(Exception e){
%>
        <h2>输入有误,请输入整数!</h2>
<%
    }
%>

3. 这题为什么容易出错

因为表单提交过来的数据,全都是:

复制代码
String

即使你在输入框里输入的是 12,服务器接收到的仍然是 "12" 字符串。

所以要先转成整数:

复制代码
Integer.parseInt(s1)

如果用户输入的是字母,比如 abc,就会报错,所以要配合 try-catch


九、输入行列数,动态打印表格

这题是 JSP 程序设计的核心模板之一。


1. 输入页面 tableInput.jsp

复制代码
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>输入行列数</title>
</head>
<body>
<h2>请输入表格行数和列数</h2>

<form action="tableShow.jsp" method="post">
    行数:<input type="text" name="row"><br><br>
    列数:<input type="text" name="col"><br><br>
    <input type="submit" value="生成表格">
</form>

</body>
</html>

2. 结果页面 tableShow.jsp

复制代码
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    request.setCharacterEncoding("UTF-8");

    String rowStr = request.getParameter("row");
    String colStr = request.getParameter("col");

    int row = 0;
    int col = 0;
    boolean ok = true;

    try {
        row = Integer.parseInt(rowStr);
        col = Integer.parseInt(colStr);
    } catch (Exception e) {
        ok = false;
    }
%>

<html>
<head>
    <title>动态表格</title>
    <style>
        table { border-collapse: collapse; }
        td { border: 1px solid #333; padding: 8px 12px; text-align: center; }
    </style>
</head>
<body>

<%
    if(ok){
%>
    <h2><%= row %> 行 <%= col %> 列表格如下:</h2>
    <table>
        <%
            for(int i = 1; i <= row; i++){
        %>
        <tr>
            <%
                for(int j = 1; j <= col; j++){
            %>
            <td><%= i %>,<%= j %></td>
            <%
                }
            %>
        </tr>
        <%
            }
        %>
    </table>
<%
    }else{
%>
    <h2>输入有误,请输入整数!</h2>
<%
    }
%>

</body>
</html>

3. 这题的核心思想

这道题你一定要吃透,因为它是很多作业题的母题。

本质上做了 4 件事:

第一步:接收参数

复制代码
request.getParameter("row")
request.getParameter("col")

第二步:字符串转整数

复制代码
Integer.parseInt(...)

第三步:if 判断是否输入有效

复制代码
if(ok)

第四步:双重 for 输出表格

  • 外层控制行

  • 内层控制列


十、输入姓名和行列数,提交后显示姓名并生成表格

这题是老师和教材特别喜欢出的综合题,因为它把"字符数据 + 数字数据 + 表单提交 + 动态表格"全合在一起了。


1. 输入页面 form.jsp

复制代码
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>输入姓名和表格参数</title>
</head>
<body>
<h2>请输入姓名、行数和列数</h2>

<form action="result.jsp" method="post">
    姓名:<input type="text" name="username"><br><br>
    行数:<input type="text" name="row"><br><br>
    列数:<input type="text" name="col"><br><br>
    <input type="submit" value="提交">
</form>

</body>
</html>

2. 结果页面 result.jsp

复制代码
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    request.setCharacterEncoding("UTF-8");

    String username = request.getParameter("username");
    String rowStr = request.getParameter("row");
    String colStr = request.getParameter("col");

    int row = 0;
    int col = 0;
    boolean ok = true;

    try {
        row = Integer.parseInt(rowStr);
        col = Integer.parseInt(colStr);
    } catch (Exception e) {
        ok = false;
    }
%>

<html>
<head>
    <title>结果页面</title>
    <style>
        table { border-collapse: collapse; }
        td { border: 1px solid #333; padding: 8px 12px; text-align: center; }
    </style>
</head>
<body>

<h2>欢迎你:<%= username %></h2>

<%
    if(ok){
%>
    <table>
        <%
            for(int i = 1; i <= row; i++){
        %>
        <tr>
            <%
                for(int j = 1; j <= col; j++){
            %>
            <td>欢迎 <%= username %></td>
            <%
                }
            %>
        </tr>
        <%
            }
        %>
    </table>
<%
    }else{
%>
    <h3>行数或列数输入错误,请输入整数!</h3>
<%
    }
%>

</body>
</html>

3. 这一题综合了什么

这题把前几章知识真正连起来了:

  • HTML 表单

  • POST 提交

  • request.getParameter()

  • 中文字符接收

  • Integer.parseInt()

  • if

  • 双重 for

  • JSP 输出

如果你这题能自己独立写出来,说明前 1~4 章已经学得比较扎实了。


十一、为什么输入字母会报错

这也是你之前反复问过的一个高频问题。

比如用户输入:

  • row = a

  • col = b

然后你写:

复制代码
row = Integer.parseInt(rowStr);
col = Integer.parseInt(colStr);

这里就会报错。

因为:

复制代码
Integer.parseInt()

只能把"看起来像整数的字符串"转换成整数,比如:

  • "3" 可以

  • "10" 可以

  • "a" 不可以

  • "3.5" 也不可以

所以为了避免程序直接崩掉,才要用:

复制代码
try {
    row = Integer.parseInt(rowStr);
    col = Integer.parseInt(colStr);
} catch (Exception e) {
    ok = false;
}

这段代码的作用就是:

如果转换成功,继续执行

如果转换失败,说明输入不合法,不让程序崩掉,而是提示用户输入错误


十二、为什么有时候页面会多出奇怪的符号或大括号

很多同学写 JSP 表格时,页面会多出:

  • }

  • }}}}

  • 半截标签

  • 表格结构错乱

最常见原因就这几个:

1. Java 代码块没闭合

例如:

复制代码
<%
for(int i = 1; i <= 3; i++){
%>
<tr><td>xxx</td></tr>

后面忘了写:

复制代码
<%
}
%>

2. HTML 写进了错误的位置

例如把 <tr><td> 塞进 Java 代码里。


3. 大括号和 %> 对不上

JSP 最容易乱的不是语法本身,而是:

  • {

  • }

  • <%

  • %>

这四组东西交叉嵌套。

所以你写 JSP 循环时,最好养成这个习惯:

  • for(...) { 单独占一行

  • } 单独占一行

  • HTML 结构按层次缩进

  • 一看到表格错乱,就先检查 trtd} 有没有对齐


十三、本章最常用的 4 个题型模板

你学这章,不只是学几个例子,而是要脑子里形成模板。


模板1:重复输出内容

复制代码
<%
for(int i = 1; i <= n; i++){
%>
    输出内容
<%
}
%>

模板2:if 控制显示

复制代码
<%
if(条件){
%>
    显示内容A
<%
}else{
%>
    显示内容B
<%
}
%>

模板3:矩形表格

复制代码
<table border="1">
<%
for(int i = 1; i <= row; i++){
%>
    <tr>
    <%
    for(int j = 1; j <= col; j++){
    %>
        <td>...</td>
    <%
    }
    %>
    </tr>
<%
}
%>
</table>

模板4:三角形乘法表

复制代码
<table border="1">
<%
for(int i = 1; i <= 9; i++){
%>
    <tr>
    <%
    for(int j = 1; j <= i; j++){
    %>
        <td><%= j %>×<%= i %>=<%= i*j %></td>
    <%
    }
    %>
    </tr>
<%
}
%>
</table>

十四、本章你必须记住的 10 个结论

  1. JSP 中的 iffor 都必须写在 <% %> 里。

  2. HTML 标签不能直接写进 Java 代码块内部。

  3. 想在 HTML 中显示变量值,必须用 <%= %>

  4. 外层 for 通常控制行,内层 for 通常控制列。

  5. 动态表格本质就是"双重循环 + table/tr/td"。

  6. 9×9 乘法表和普通 9×9 表格的区别,在于内层循环条件不同。

  7. 表单提交的数据默认是字符串。

  8. 数字字符串要参与计算,通常先 Integer.parseInt()

  9. 输入非法字符时,要用 try-catch 防止程序报错。

  10. JSP 做题最核心的能力,不是背语法,而是把"Java 逻辑 + HTML 页面"拼起来。


十五、本章练习题

练习1

用 JSP 输出 10 行"Hello JSP"。


练习2

用 JSP 输出一个 5 行 6 列的表格,每个单元格显示当前行号和列号。


练习3

用 JSP 输出 9×9 乘法表。


练习4

做一个输入两个整数的页面,提交后显示它们的和。


练习5

做一个输入姓名、行数、列数的页面,提交后显示姓名并生成对应表格。


十六、本章小结

这一章你真正开始进入了"JSP 程序设计"阶段。

前面第3章更多是在认识 JSP 语法,

而这一章开始,你已经在做真正的页面程序:

  • if 控制显示内容

  • for 动态生成页面

  • 用双重循环画表格

  • 用表单提交参数

  • request 接收数据

  • Integer.parseInt() 处理数字输入

  • try-catch 处理错误输入

所以这一章非常重要。

因为很多老师出的 JSP 基础题,本质都逃不过这几个模型。

你把这一章吃透,课程前半段的程序设计题基本就有底了。

相关推荐
特种加菲猫2 小时前
C++ std::list 完全指南:从入门到精通所有接口
开发语言·c++
共享家95272 小时前
Java入门(类和对象)
java·开发语言
习惯就好zz2 小时前
Qt Quick 系统托盘完整实践
开发语言·qt·qml·系统托盘·system tray·qapplication·qguiapplication
笨笨马甲2 小时前
Qt集成OpenCV
开发语言·qt
笨笨马甲2 小时前
Qt 工业机器视觉开发
开发语言·qt
咚为2 小时前
深入浅出 Rust FFI:从内存安全到二进制兼容
开发语言·安全·rust
阿钱真强道2 小时前
06 Python 数据分析入门:集中趋势与离散程度
python·数据挖掘·数据分析·pandas·可视化·python入门·统计学
-杨豫2 小时前
JavaScript入门到精通全套资料,以及核心进阶ES6语法,API,js高级等基础知识和实战教程
开发语言·javascript·es6