Front-end interactive calculator
Before doing this, you must first create a servlet project. The blog has already introduced it before, so let’s start directly.
first step
- Create an html file
here, pay attention to create it in the webapp directory
code show as below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的计算器</title>
</head>
<body>
<form method="get" action="calc">
<div style="text-align: center">
<h1>计算器</h1>
数字1:<input id="n1" name="number1" type="number" ><p></p>
数字2:<input id="n2" name="number2" type="number" ><p></p>
<input type="submit" value="提交">
</div>
</form>
</body>
</html>
Precautions:
- Here the entire html file is a form form
- The submit key type is "submit", not "button" anymore, the button cannot be connected to the backend
Second step
- Create a .java file and write the back-end code. The
creation process has been shown before, here is the code directly
Direct five-step snake operation
- Override the doGet and doPost methods and call get directly in the post
- Set encoding format
- Set the return type
- Receive front-end data
- Return the result to the front end
Precautions
- When setting the encoding format: case is not sensitive, UTF-8 and utf-8 are both possible
- There are four types when setting the return type: text/html, text/css, application/javascript, image/png
- Set the encoding format and return type before obtaining the output stream (getWriter())
- When receiving front-end data, the name is used, not the id
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.io.PrintWriter;
public class calculator extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.设置编码格式
resp.setCharacterEncoding("utf-8");
//2.设置返回类型
resp.setContentType("text/html");
//3.接收前端数据
int num1=Integer.parseInt(req.getParameter("number1"));
int num2=Integer.parseInt(req.getParameter("number2"));
int total=num1+num2;
//4.给前端返回结果
PrintWriter printWriter=resp.getWriter();
printWriter.println(String.format("<h1>计算结果为:%d</h1>",total));
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req,resp);
}
}
third step
- Configure routing (web.xml)
The precautions are all in the code
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1"
metadata-complete="true">
<!--用来注册servlet接口的实现类-->
<servlet>
<servlet-name>long</servlet-name>
<!-- 和写的java文件名必须一致(全包名)-->
<servlet-class>calculator</servlet-class>
</servlet>
<!-- 用来注册sverlet的接口-->
<servlet-mapping>
<!-- 和上面的name必须一致-->
<servlet-name>long</servlet-name>
<!--在Tomcat上部署时访问的url (最好全小写)-->
<url-pattern>/calc</url-pattern>
</servlet-mapping>
</web-app>
the fourth step
- Configure Tomcat in idea
Select the first war package and click OK
Click OK, and configuration
like this on the configuration was successful
after all the operation is complete, just click Run to
wait a moment, the following interface will pop up a browser
and then add the name and the suffix html file in the url to access to
after clicking submit, Will jump to another page
so that a front-end interaction has been successfully performed
This is the whole page submission, and the part of the page submission function will be updated later! ! !