实现一个完整的前后端交互

最新推荐文章于 2022-10-24 13:51:22 发布

qq_52025208

最新推荐文章于 2022-10-24 13:51:22 发布

阅读量3.4k

点赞数 13

文章标签： html web http

本文链接：https://blog.csdn.net/qq_52025208/article/details/115335722

版权

题目一:计算器

1.构建项目
在这里插入图片描述
前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--form表单提交数据给后端接口,action：提交的地址,method:请求的类型，前后端交互请求的接口都是post-->
<form method="post" action="calc">
    <div style="text-align: center;">
        <h1>计算器</h1>
        数字一:<input id="n1" name="number1" type="number"><p></p>
        数字二:<input id="n2" name="number2" type="number"><p></p>
        <input value="提 交" type="submit">
        <!--submit：就可以在点击提交按钮时触发将当前表单的数字一二的值发送给后端的servlet接口-->
    </div>
</form>
</body>
</html>

后端代码：
在web.xml中添加命名为计算器接口
在这里插入图片描述
CalcServlet:

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("number1");
        String num2 = request.getParameter("number2");
        //3.业务逻辑处理
        int total = Integer.parseInt(num1) + Integer.parseInt(num2);
        //4.返回结果给前端
        PrintWriter writer = response.getWriter();
        writer.println(String.format("<h1>计算的结果为: %d</h1>",total));//数字%d,字符%s
    }

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

2、展现的页面
在这里插入图片描述
在地址后加入：

输入数字一二后：

题目二：定时刷新器

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;
import java.util.Date;

public class RefreshServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        response.setContentType("utf-8");

        response.setIntHeader("Refresh",1);//设置请求头，每秒钟刷新一次
        PrintWriter writer = response.getWriter();
        writer.println(String.format("<h1>当前时间: %s</h1>",new Date()));
    }
}

展现页面
每一秒刷新一次
题目三：request常用信息

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;
import java.io.StringReader;

public class MyRequestServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");

        String method = request.getMethod();//获取请求方法类型

        String uri = request.getRequestURI();//获取相对地址信息

        String contentType = request.getContentType();

        PrintWriter writer = response.getWriter();
        writer.println(String.format("<h1>method:%s</h1><p></p>",method));
        writer.println(String.format("<h1>uri:%s</h1><p></p>",uri));
        writer.println(String.format("<h1>contentType:%s</h1><p></p>",contentType));
    }
}

题目四：跳转页面

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class LocationServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html");
        /*//实现跳转方式1
        response.setStatus(301);//永久重定向
        response.setHeader("location","http://www.baidu.com");//s:相应的地址,s1:跳转的地址*/
        //跳转方式二：
        response.sendRedirect("http://www.baidu.com");
    }
}

展现的页面：

qq_52025208

关注

13
点赞
踩
83

收藏

觉得还不错? 一键收藏
0
评论
实现一个完整的前后端交互

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form method="post" action="calc"> <div style="text-align: center;"> <h1&g
复制链接

扫一扫