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

题目一:计算器

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");/*//实现跳转方式1response.setStatus(301);//永久重定向response.setHeader("location","http://www.baidu.com");//s:相应的地址,s1:跳转的地址*///跳转方式二：response.sendRedirect("http://www.baidu.com");}
}

展现的页面：

实现一个完整的前后端交互相关推荐

简单的前后端交互的案例
简单的前后端交互的案例--在表单页面输入信息,该信息存入数据库首先封装自己的数据库 //封装数据库 //导入mysql模块 const mysql = require ('mysql2');//创建 ...
[原创]前后端交互的方式整理
前言本来我只是想整理下前后端如何传输数据这种交互过程,大概流程如下: 前台使用ajax通过get/post等方式提交数据到后端后端如何获取参数经过业务处理后,返回前端对应的响应数据前端接受到响 ...
写给刚入门的前端工程师的前后端交互指南
转自原文写给刚入门的前端工程师的前后端交互指南作为刚接触前端的不久的童鞋,大家都会兴奋于CSS和JS所带来漂亮界面,然而,前端工程师除了UI重构外,还有非常重要的职责在正确的区域渲染出服务端的数据 ...
从0搭建一个Springboot+vue前后端分离项目(四)利用Element框架搭建页面主体部分表格与侧边栏
https://element-plus.gitee.io/zh-CN/component/menu.html 导航栏部分选定menu菜单,选择竖型样式的复制一下 <el-menudefau ...
Ionic+Angular+Express实现前后端交互使用HttpClient发送get请求数据并加载显示(附代码下载)
场景 Ionic介绍以及搭建环境.新建和运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166 在上面搭建起 ...
SpringBoot+AntV实现一次前后端交互渲染多个饼状图
场景效果 SpringBoot+AntV实现饼状图中的花瓣图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92810169 ...
Flask使用ajax进行前后端交互
ajax前后端交互的使用已经非常普及了, 这种数据交互方式比表单提交数据带给用户的使用体验更好一些.同时,利用ajax交互时数据传输一般使用json,我们可以很方便的管理我们所需要的数据.只需要定义好 ...
Django之POST GET与前后端交互
Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...
服务器版博客系统、前后端交互1
一.准备工作 1). 创建 maven 项目 2). 引入依赖 servlet,jackson,mysql <dependencies><!-- https://mvnreposit ...

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

实现一个完整的前后端交互相关推荐

最新文章

热门文章