叮~你有一个完整的前后端交互的计算器注意查收！

本文链接：https://blog.csdn.net/m0_53997485/article/details/115335924

文章目录

前言
一、添加一个静态页面
二、实现一个接口
三、前后端交互
四、运行
总结

前言

之前我们做了计算器的加、减、乘、除以及清空功能，今天来让我们一起看一下怎么实现一个前后端交互的计算器吧~
今天我们的重点不在HTML上，而是前后端交互！！

提示：以下是本篇文章正文内容，下面案例可供参考

一、添加一个静态页面

在webapp 下添加一个html类型的文件calc.html，实现计算器的加法功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>calc</title>
</head>
<body>
<form method="post" action="calc">
    <div style="text-align: center;">
        <h1>计算器</h1>
        数字1：<input id="n1" name="n1" type="number"><p></p>
        数字2：<input id="n2" name="n2" type="number"><p></p>
        <input value=" 提 交 " type="submit">
    </div>
</form>
</body>
</html>

注意：此时的button要换为submit

二、实现一个接口

在web.xml中添加一个计算器接口

 <!--计算器接口-->
  <servlet>
    <servlet-name>calc</servlet-name>
    <servlet-class>CalcServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>calc</servlet-name>
    <url-pattern>/calc</url-pattern>
  </servlet-mapping>

注意：此时的html是在一个<form>表单里
此时的<servlet></servlet>中的<url-pattern>/calc</url-pattern>必须为小写命名规则

三、前后端交互

创建一个<servlet-class>CalcServlet</servlet-class>中的CalcServlet类，将他升级为Servlet后端类。

1.设置编码和返回的类型

    response.setCharacterEncoding("utf-8");
    response.setContentType("text/html");

2.获得前端传递的参数

    String num1 = request.getParameter("n1");
    String num2 = request.getParameter("n2");

注意：这里的参数穿的是name，不是id，解决办法为：将两个内容设置一样，就不会出错啦！

3.业务逻辑处理

    int ret = Integer.parseInt(num1) + Integer.parseInt(num2);

4.返回结果给前端

	PrintWriter writer = response.getWriter();
    writer.println(String.format("<h1 style = 'color:green'>计算结果为：%d</h1>",ret));

代码如下:

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 CalcServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.设置编码和返回的类型
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html");
        //2.获得前端传递的参数
        String num1 = request.getParameter("n1");
        String num2 = request.getParameter("n2");
        //3.业务逻辑处理
        int ret = Integer.parseInt(num1) + Integer.parseInt(num2);
        //4.返回结果给前端
        PrintWriter writer = response.getWriter();
        writer.println(String.format("<h1 style = 'color:green'>计算结果为：%d</h1>",ret));
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}