HTML和JSP的交互

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

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

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

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

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

点击submit后如下图：

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

2）任务代码

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

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

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

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

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，具体代码如下：

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

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

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

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