JSP(3)使用jsp實現簡單的計算器
阿新 • • 發佈:2019-02-01
1 目錄結構
2 程式碼
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'MyCalInterface.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">
-->
<%-- 引用js檔案 --%>
<script type="text/javascript" src="js/js1.js"></script>
</head>
<body>
<%-- 使用js驗證輸入的兩種方式,①在form屬性中驗證onsubmit; ②在按鈕事件中驗證onclick --%>
<form action="/CalJsp/Result.jsp" method="post" onsubmit="return checkNum()">
請輸入第一個數:<input type="text" id="num1" name="num1" /><br />
請輸入第二個數:<input type="text" id="num2" name="num2" /><br/>
請選擇運算子:<select name="operator">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select><br/>
<input type="submit" onclick="return checkNum()" value="計算" />
</form>
</body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'Result.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">
</head>
<body>
<%
<%-- 獲取提交的資料,與servlet一樣 --%>
String num1 = request.getParameter("num1");
String num2 = request.getParameter("num2");
String oper = request.getParameter("operator");
double res = 0;
double d_num1 = Double.parseDouble(num1);
double d_num2 = Double.parseDouble(num2);
if(oper.equals("+")) { res = d_num1 + d_num2; }
else if (oper.equals("-")) { res = d_num1 - d_num2; }
else if (oper.equals("*")) { res = d_num1 * d_num2; }
else if (oper.equals("/")) { res = d_num1 / d_num2; }
out.println("結果是:" + res);
%>
</body>
</html>
3 將以上程式碼合併到一個檔案(介面與計算操作合為一個檔案)
<%-- 只保留變化的部分 --%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<%
String num1 = request.getParameter("num1");
String num2 = request.getParameter("num2");
String oper = request.getParameter("operator");
double res = 0;
if (num1!=null && num2!=null && oper!=null) {
double d_num1 = Double.parseDouble(num1);
double d_num2 = Double.parseDouble(num2);
if(oper.equals("+")) { res = d_num1 + d_num2; }
else if (oper.equals("-")) { res = d_num1 - d_num2; }
else if (oper.equals("*")) { res = d_num1 * d_num2; }
else if (oper.equals("/")) { res = d_num1 / d_num2; }
}
%>
<body>
<form action="/CalJsp/MyCalInterface.jsp" method="post" onsubmit="return checkNum()">
<%-- 提交表單後,輸入框內數字保留 --%>
請輸入第一個數:<input type="text" id="num1" value="<%= num1==null?"":num1 %>" name="num1" /><br />
請輸入第二個數:<input type="text" id="num2" value="<%= num2 %>" name="num2" /><br/>
請選擇運算子:<select name="operator">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select><br/>
<input type="submit" onclick="return checkNum()" value="計算" />
</form>
結果是:<%= res %>
</body>
</html>