取其精华，去其糟粕——前后端交互的计算器——servlet、html、JavaScript、Tomcat

前后端交互的计算器

继上一篇配置Servlet，如果没配置好，可看我上一篇文章。
当然，还必须要有Tomcat，没有可去官网自行下载。（Tomcat做的就是将本地资源可以上传至前端进行访问）。注意：Tomcat的路径必须要知道，且必须是全英文！！！！
第一步：使当前项目绑定Tomcat；
在这里插入图片描述
下一步的OK别急着点，先做紧接着的操作，OK最后点，我图片画的时候有点问题！！！！！

选中打包好的war包，点击ok即可配置好。
第二步：建立html文件，在webapp上右键新建html文件；

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

</body>
</html>

其中，post是传参方式，counter是servlet申请的接口的路径名。
切记input中的按钮不再是button，而是submit，button无法完成前后端交互。
第三步：配置web.xml文件；

<?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>counter</servlet-name>
    <servlet-class>CounterServlet</servlet-class>
  </servlet>
  <!--用来注册servlet的接口-->
  <servlet-mapping>
    <servlet-name>counter</servlet-name>
    <url-pattern>/counter</url-pattern>
  </servlet-mapping>

</web-app>

前端会在根目录下找到counter，进而找寻servlet-name为counter（随便取，但要和上面的servlet-name保持一致），最终找到后端实现类CounterServlet。而url-pattern处的counter（切记加斜杠）要和上面action的参数名一致。
第四步：创建CounterServlet类了；

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 CounterServlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html");
        String num1=request.getParameter("name1");
        String num2=request.getParameter("name2");
        int end=Integer.parseInt(num1)+Integer.parseInt(num2);
        PrintWriter writer = response.getWriter();
        writer.println(String.format("<h1 style='color:red'>最终结果为:%d</h1>",end));
    }

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

response.setCharacterEncoding(“utf-8”)：这一步是防止中文乱码，所以要设置返回的响应的编码格式；
response.setContentType(“text/html”)：设置显示文本，因为是html前端页面所以是html；
String num1=request.getParameter(“name1”)：这里切记要用input标签中的name属性，不能用id属性，因为后端程序是不能通过id获取前端信息的。
String.format()类似于C语言中的printf，只不过对于保留小数时自带四舍五入。
一切完成之后，点击运行；
在这里插入图片描述
比较简陋，喜欢好看样式的可以自己设置。（这是前端页面）
点击提交后转为以下界面:后端返回的计算结果。

如果程序执行后自动跳转到如下界面：

别怕！只需在http://localhost:8082/web/之后加上html文件名和后缀全称便可执行成功！！！！
做的比较low，还请担待。

取其精华，去其糟粕——前后端交互的计算器——servlet、html、JavaScript、Tomcat

前后端交互的计算器

猜你喜欢