1.创建maven webapp项目
在pom.xml的<project></project>标签内部中加入以下代码，引入servlet依赖库
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.0</version>
</dependency>
</dependencies>2.写个HTML的form表单
以下是我自己写的示例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>牧之原同学</title>
6 <link rel="stylesheet" href="./style.css">
7 </head>
8 <body>
9 <div id="outer" class="on-blur">
10 <div id="container">
11 <div class="search bar">
12 <form action="/submit.do" method="get">
13 <input type="text" name="search" placeholder="搜索网页" autocomplete="off">
14 <button type="submit">搜索</button>
15 </form>
16 </div>
17 </div>
18 </div>
19 <script src="javascript.js"></script>
20 </body>
21 </html>引用的css文件内容如下
* {
box-sizing: border-box;
font-size: 17px;
}
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-image: url("./image/LakeKochelsee.jpg");
font-weight: 500;
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
.on-focus {
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, .3);
}
.on-blur {
}
#container {
width: 1000px;
height: 100px;
margin: 0 auto;
}
div.search {
padding: 200px 0;
}
form {
position: relative;
width: 600px;
margin: 0 auto;
}
input, button {
border: 1px solid lightgray;
outline: none;
color: gray;
}
input {
width: 600px;
height: 50px;
padding-left: 20px;
}
button {
height: 50px;
width: 80px;
cursor: pointer;
position: absolute;
background: white;
}
.bar input {
border-radius: 60px;
background: white;
}
.bar button {
top: 0;
right: 0;
border-radius: 0 60px 60px 0;
}
.bar button:before {
font-family: FontAwesome, serif;
}引入的JavaScript文件内容如下
function onFocusEvent() {
element.setAttribute("class", "on-focus");
}
function onBlurEvent() {
element.setAttribute("class", "on-blur");
}
let element = document.querySelector("#outer");
let inputElement = document.querySelector("input");
inputElement.addEventListener("focus", onFocusEvent);
inputElement.addEventListener("blur", onBlurEvent);3.对提交内容进行处理
form表单提交到“/submit.do”，Java处理代码
package com.lxy.servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.net.URLEncoder;
import java.nio.charset.StandardCharsets;
public class SubmitServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
String search = req.getParameter("search");
String encode = URLEncoder.encode(search, StandardCharsets.UTF_8);
String url = "https://cn.bing.com/search?q=" + encode;
resp.sendRedirect(url);
resp.setContentType("text/html; charset=utf-8");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
}
在web.xml注册servlet
<servlet>
<servlet-name>SubmitServlet</servlet-name>
<servlet-class>com.lxy.servlet.SubmitServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SubmitServlet</servlet-name>
<url-pattern>/submit.do</url-pattern>
</servlet-mapping>最终的目录结构