HTML和JSP的交互
HTML和JSP的交互
1、任务简介
本博客分享的是工程训练任务中“中间件和WEB服务”里面的内容，主要涉及HTML和JSP的知识，我通过两个普通任务和一个挑战任务将所学成果分享给大家。
2、任务代码
（1）普通任务1
1）任务内容
通过HTML表单输入两个数字，提交给jsp程序，完成此两个数字相加结果的输出。
2）任务代码
首先需要制作一个HTML网页，通过该HTML页面给JSP页面数据，我使用EditPlus制作该网页，将其标题命名为“求和网页输入端”，其中需要使用到标签br进行换行，并且br标签不需要结束标志，HTML代码如下：
<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，具体代码如下：
<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 && start3）浏览器查看
将两个文件打包到文件夹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，具体代码如下：
<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; ifor 循环遍历数组
out.println(b[i]+"
");//输出
}
}
%>
body>
html>
3）浏览器查看
将两个文件打包到文件夹JSP4中，并将该文件夹存入指定路径C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps下，使用之前任务中学习的方法打开该网页，结果如下：
本步骤中我勾选了“汉语”和“英语”，提交后显示的结果如下图：
从结果中可以看出，JSP页面可以准确显示我在HTML页面中勾选的信息，达到了任务的要求；
3、总结
通过本次任务我学会了HTML网页与JSP服务器之间的交互方法，为以后更加深入的学习打下了基础，其中使用到了Tomcat服务器，具体使用方法自行百度即可，可以说是十分简单的，如果觉得文章有用可以加波关注，以后我还会分享nginx服务器与natapp服务器的使用方法。