JSP+Servlet实现web计算器

介绍

由于要实习了,因此把以前做过的复盘一下,并做个总结,下面是用JSP+Servlet以及JSP+Servlet+JavaBeans两种方式实现的web计算器,先看一下下效果,原理也比较简单,代码的话后面都会贴出来,整个项目的传送门为:可以点击我送你去传送门
在这里插入图片描述

代码实现-1

  • index.jsp 主页的呈现
  • CalculatorServlet.java 接收页面参数,并返回参数
  • web.xml 进行servlet的配置

首先是index.jsp文件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
</head>

<body>
	web 计算器
	<br>
	<form action="servlet/CalculateServlet" method="get">
		<table>
			<tr>
				<td>输入第一个数:</td>
				<td><input type="text" name="first" value=${requestScope.first} ></td>
			</tr>
			<tr>
				<td>计算类型:</td>
				<td><input type="radio" name="type" value="1">+<input
					type="radio" name="type" value="2">-<input type="radio"
					name="type" value="3">* <input type="radio" name="type"
					value="4">/</td>
			</tr>
			<tr>
				<td>输入第二个数:</td>
				<td><input type="text" name="second" /></td>
			</tr>
			<tr>
				<td ><input type="submit" value="提交"></td>
	</form>
			<td >答案是:${requestScope.answer} </td>
			</tr>
	</table>
</body>
</html>

其次是CalculatorServlet.java

package com.yuhu;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CalculateServlet extends HttpServlet {

	/**
	 * Constructor of the object.
	 */
	public CalculateServlet() {
		super();
	}

	/**
	 * Destruction of the servlet. <br>
	 */
	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

	/**
		 * The doGet method of the servlet. <br>
		 *
		 * This method is called when a form has its tag value method equals to get.
		 * 
		 * @param request the request send by the client to the server
		 * @param response the response send by the server to the client
		 * @throws ServletException if an error occurred
		 * @throws IOException if an error occurred
		 */
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	/**
		 * The doPost method of the servlet. <br>
		 *
		 * This method is called when a form has its tag value method equals to post.
		 * 
		 * @param request the request send by the client to the server
		 * @param response the response send by the server to the client
		 * @throws ServletException if an error occurred
		 * @throws IOException if an error occurred
		 */
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		request.setCharacterEncoding("utf-8");
		double answer = 0;
		
		//假设两个数都符合要求
		double first = Double.parseDouble(request.getParameter("first"));
		double second = Double.parseDouble(request.getParameter("second"));
		int type = Integer.parseInt(request.getParameter("type"));
		switch(type){
			case 1:
				answer = first + second;
				break;
			case 2:
				answer = first - second;
				break;
			case 3:
				answer = first * second;
				break;
			case 4:
				answer = first / second;
				break;
			default:
				break;
		}
		request.setAttribute("answer", answer);
		request.getRequestDispatcher("../index.jsp").forward(request, response);
	}

	/**
		 * Initialization of the servlet. <br>
		 *
		 * @throws ServletException if an error occurs
		 */
	public void init() throws ServletException {
		// Put your code here
	}
}

最后是web.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <display-name></display-name>
 
 <!-- 配置servlet -->
  <servlet>
    <servlet-name>CalculateServlet</servlet-name>
    <servlet-class>com.yuhu.CalculateServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>CalculateServlet</servlet-name>
    <url-pattern>/servlet/CalculateServlet</url-pattern>
  </servlet-mapping>
</web-app>

代码实现-2

在第二种形式中无需web.xml的配置文件只需要一个Calculator的bean类,具体如下:

  1. Calculator.java
package com.yuhu;


/**
 * Bean of calculator
 */
public class Calculator {
	
	private String first;
	private String second;
	private int type;
	private String answer;
	
	public String getFirst() {
		return first;
	}
	public void setFirst(String first) {
		this.first = first;
	}
	public String getSecond() {
		return second;
	}
	public void setSecond(String second) {
		this.second = second;
	}
	public int getType() {
		return type;
	}
	public void setType(int type) {
		this.type = type;
	}
	public double getAnswer() {
		switch(type){
			case 1:
				this.answer = (Double.parseDouble(first) + Double.parseDouble(second)) + "";
				break;
			case 2:
				this.answer = (Double.parseDouble(first) - Double.parseDouble(second)) + "";
				break;
			case 3:
				this.answer = (Double.parseDouble(first) * Double.parseDouble(second)) + "";
				break;
			case 4:
				this.answer = (Double.parseDouble(first) / Double.parseDouble(second)) + "";
				break;
			default:
				return 0.0;
		}
		return Double.parseDouble(answer);
	}
	public void setAnswer(String answer) {
		this.answer = answer;
	}
}

  1. index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<jsp:useBean id="calculator" class="com.yuhu.Calculator" />
<jsp:setProperty property="first" name="calculator"/>
<jsp:setProperty property="second" name="calculator"/>
<jsp:setProperty property="type" name="calculator"/>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>web calculator</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
   <link rel="stylesheet" type="text/css" href="styles.css">
   -->
</head>

<body>
   web 计算器
   <br>
   <!-- this is the first version <form action="servlet/CalculateServlet" method="get"> -->
   <form action="" method="get">
   	<table>
   		<tr>
   			<td>输入第一个数:</td>
   			<td><input type="text" name="first"></td>
   		</tr>
   		<tr>
   			<td>计算类型:</td>
   			<td><input type="radio" name="type" value="1">+<input
   				type="radio" name="type" value="2">-<input type="radio"
   				name="type" value="3">* <input type="radio" name="type"
   				value="4">/</td>
   		</tr>
   		<tr>
   			<td>输入第二个数:</td>
   			<td><input type="text" name="second"></td>
   		</tr>
   		<tr>
   			<td ><input type="submit" value="提交"></td>
   </form>
   		<!-- this is the first version ${requestScope.answer} -->
   		<td>答案是:<jsp:getProperty name="calculator" property="answer" /> </td>
   		</tr>
   </table>
</body>
</html>

  • 1
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值