实现一个完整的前后端交互
题目一:计算器
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("计算的结果为: %d
",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("当前时间: %s
",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("method:%s
",method));
writer.println(String.format("uri:%s
",uri));
writer.println(String.format("contentType:%s
",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");
}
}
展现的页面：
