HTML和JSP的交互

1、任务简介

本博客分享的是工程训练任务中“中间件和WEB服务”里面的内容，主要涉及HTML和JSP的知识，我通过两个普通任务和一个挑战任务将所学成果分享给大家。

2、任务代码

（1）普通任务1

1）任务内容
通过HTML表单输入两个数字，提交给jsp程序，完成此两个数字相加结果的输出。

2）任务代码
首先需要制作一个HTML网页，通过该HTML页面给JSP页面数据，我使用EditPlus制作该网页，将其标题命名为“求和网页输入端”，其中需要使用到标签br进行换行，并且br标签不需要结束标志，HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>求和</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<body>
<h1>求和网页输入端(罗思洋)</h1>
<form action="Result.jsp" method="POST">
<h1>向JSP程序提交两个整数:</h1>
<br>
<br>
<br>
<br>
<br>
<center>
<ul>
第一个数: <input type="text" name="first_number">
<br />
第二个数: <input type="text" name="last_number" />
<br>
<input type="submit" value="Submit" />
</form>
</body>
</html>

HTML网页制作完成后就是JSP页面的制作，需要指定编写语言为Java，并导入java.util类下的所有包，指定编码方式为UTF-8，两个页面均使用标签命名为“求和”，对于在HTML页面中提交的两个数字，在JSP中都需要从request中取得值，并将得到的字符串转换为整形变量进行输出，将两个数字分别输出到界面后，还需要将相加的结果进行输出显示，完整的代码如下：

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>  
<html>
<head>
<title>求和</title>
</head>
<body>
<h1>求和网页输出端(罗思洋)</h1>
<center>
<br>
<br>
<br>
<br>
<br>
<ul>
<li><p><b>第一个数:</b>
   <%  
        String s=request.getParameter("first_number");
        int m=Integer.parseInt(s);  
        out.println(m);
   %>
</p></li>
<li><p><b>第二个数:</b>
   <%  
        String t=request.getParameter("last_number");
        int n=Integer.parseInt(t);
        out.println(n);
    %>
</p></li>
<li><p><b>两个数的和是:</b>
   <%  
        int p=m+n;
        out.println(p);
    %>
</p></li>
</ul>
</body>
</html>

3）浏览器查看
将两个文件打包后存入指定路径C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps下，使用之前任务中学习的方法打开该网页，如下图：
这里写图片描述

点击submit后如下图：
这里写图片描述

（2）普通任务2

1）任务内容
通过HTML表单输入3个字符串，提交给jsp程序，完成在字符串1中统计字符串2出现的次数，并把各个字符串2字串在字符串1中替换为字符串3字串，最后把替换结果输出到浏览器。

2）任务代码

本部分中需要制作的HTML网页格式与上面两个步骤中制作的HTML网页类似，只需要增加一个字符串的输入栏即可，所以可以在前面的基础上进行修改，将该网页命名为String.html，具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>字符串的替换</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<body>
<h1>字符串替换输入端（罗思洋）</h1>
<form action="Replace.jsp" method="POST">
<h1>向JSP程序提交三个字符串：</h1>
<br>
<br>
<br>
<br>
<br>
<center>
<ul>
第一个字符串: <input type="text" name="First_String">
<br />
第二个字符串: <input type="text" name="Second_String" />
<br />
第三个字符串: <input type="text" name="Third_String" />
<br>
<input type="submit" value="Submit" />
</form>
</body>
</html>

在进行JSP页面的制作时，需要指定编写语言为Java，并导入java.util类下的所有包，指定编码方式为UTF-8，两个页面均使用标签title命名为“字符串的替换”，对于在HTML页面中提交的三个数字，在JSP中都需要使用与之前步骤中相同的方法从request中取得值，其中需要使用ISO-8859-1进行翻译，并指定编码格式为utf-8码；
使用的while循环，其方法与以前所学习的Java application中学习的while循环类似，循环中还使用了indexOf方法来查找元素的位置，并将统计结果输出；
除了以上提到的点外，还需要使用第三个字符串中的内容替换第二个字符串的内容，并将结果输出，其中需要使用replace方法进行字符串的替换，完整的代码如下图：

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>  
<html>
<head>
<title>字符串的替换</title>
</head>
<body>
<h1>字符串替换输出端（罗思洋）</h1>
<h1>替换后的结果为：</h1>
<center>
<br>
<br>
<br>
<br>
<br>
<ul>
<li><p><b>第一个字符串:</b>
   <%  
        String s=request.getParameter("First_String");
        String ss=new String(s.getBytes("ISO-8859-1"), "utf-8");
        out.println(ss);
   %>
</p></li>
<li><p><b>第二个字符串:</b>
   <%  
        String t=request.getParameter("Second_String");
        String tt=new String(t.getBytes("ISO-8859-1"), "utf-8");
        out.println(tt);
        int count=0;
        int start=0;
    %>
</p></li>
<li><p><b>第三个字符串:</b>
   <%  
        String a=request.getParameter("Third_String");
        String aa=new String(a.getBytes("ISO-8859-1"), "utf-8");
        out.println(aa);
   %>
</p></li>
<li><p><b>第二个字符串在第一个字符串中出现的次数是:</b>
    <%
        while (s.indexOf(t, start)>=0 && start<s.length())
        { 
            count++;
            start=s.indexOf(t, start)+t.length();
        }
        out.println(count);
    %>
</p></li>
<li><p><b>替换后的字符串是:</b>
   <%  
        String str=s.replace(t,a);
        String str1=new String(str.getBytes("ISO-8859-1"), "utf-8");
        out.println(str1);
    %>
</p></li>
</ul>
</body>
</html>

3）浏览器查看
将两个文件打包到文件夹JSP3中，并将该文件夹存入指定路径C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps下，使用之前任务中学习的方法打开该网页，在打开HTML网页String.html后显示结果如下：
这里写图片描述

此时我将第一个字符串设为“我是罗思洋”，第二个字符串设为“我是”，第三个字符串设为“I am ”，点击Submit后第三个字符串可以替换第二个字符串，并将替换结果显示到JSP页面上，结果如下图所示：
这里写图片描述

（3）挑战任务

1）任务内容
通过HTML表单输入一个4个选项的复选框字段，提交给jsp程序，要求在浏览器上输出这4个复选框哪几个被勾选了。

2）任务代码
任务挑战中所需要制作的HTML网页与普通任务重需要制作的HTML网页稍有不同，但是难度差不多，对于标题的设置方法和提示性文字的输入就不过多赘述了，在本任务中不需要我们输入字符串，而是需要勾选所需信息，故需要将intput type改为checkbox，其中checkbox代表HTML中的一个选择框，在HTML 文档中标签input type=”checkbox”每出现一次，checkbox对象就会被创建，关于HTML中的intput对象可以通过菜鸟教程进行学习，创建一个复选框的代码如下图：
这里写图片描述

此外还可以使用标签font size=6和标签font color=blue定义字号大小以及字体的颜色，我将字号大小定义为6，而将字体颜色定义为蓝色，这些都是可以自行修改的；
后面提交键的创建方法与普通任务一样，我将该网页命名为Langueage.html，具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>多选</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<body>
<h1>多选输入端（罗思洋）</h1>
<form action="Result1.jsp" method="post">
<h1>请选择您感兴趣的语言：</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center>
<font size=6><font color=blue>
 <input type="checkbox" name="Language" value="汉语" />汉语<br>
 <input type="checkbox" name="Language" value="英语" />英语<br>
 <input type="checkbox" name="Language" value="日语" />日语<br>
 <input type="checkbox" name="Language" value="法语" />法语<br>
 <p><input type="submit" value="submit" /></p>
</form>
</body>
</html>

制作完HTML网页后就需要制作JSP页面，需要将JSP页面指定编码格式为utf-8码，这样就可以避免乱码的出现，需要将JSP页面命名为Result1.jsp，并将两个页面的标题均设置为“多选”，在页面前端输入提示信息，对于需要输出的信息我叫字号大小和字体颜色设置的与前面的HTML页面相同；
在对勾选信息进行识别时，首先需要使用request.setCharacterEncoding对客户端请求进行重新编码，然后需要使用getParameterValues方法将值取到b[]数组中，使用for循环便利数组后输出已勾选的语言，具体代码如下：

<%@ page contentType="text/html;charset=utf-8" %>
<html>
<head> 
 <title>多选</title>
</head>
<body>
<h1>多选输出端（罗思洋）</h1>
<h1>您感兴趣的语言为：</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center>
<font size=6><font color=blue>
<%
  request.setCharacterEncoding("utf-8");//对客户端请求进行重新编码
  String b[] = request.getParameterValues("Language");//用getParameterValues的方法，将核取到的值取到b[]数组内
  if(b != null) {//判断数组不为空
  for(int i = 0; i<b.length; i++) {//for循环遍历数组
  out.println(b[i]+"<br>");//输出
  }
 }
%>
</body>
</html>

3）浏览器查看
将两个文件打包到文件夹JSP4中，并将该文件夹存入指定路径C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps下，使用之前任务中学习的方法打开该网页，结果如下：
这里写图片描述

本步骤中我勾选了“汉语”和“英语”，提交后显示的结果如下图：
这里写图片描述
从结果中可以看出，JSP页面可以准确显示我在HTML页面中勾选的信息，达到了任务的要求；

3、总结

通过本次任务我学会了HTML网页与JSP服务器之间的交互方法，为以后更加深入的学习打下了基础，其中使用到了Tomcat服务器，具体使用方法自行百度即可，可以说是十分简单的，如果觉得文章有用可以加波关注，以后我还会分享nginx服务器与natapp服务器的使用方法。