JSP學習之再談計算器

這節中,我們將數據的提交、處理、結果顯示放在同一個頁面上。

代碼:

<!-- 這是計算器的界面-->
<%@page contentType="text/html;charset=gb2312"%>
<html>
<head>
	<!--在jsp中添加jsp代碼,防止用戶空提交-->
	<script language="javascript">
		//寫一個函數判斷用戶是不是提交空的
		function checkNum(){
			if(form1.num1.value==""){
				window.alert("num1,不能爲空haha");
				return false;
			}
			//判斷num1,是不是一個數
			if(Math.round(form1.num1.value)!=form1.num1.value){
				window.alert("num1,不是一個數");
				return false;
			}
		}
	</script>
</head>
	<body>
		<%
			//接收第一個數(通過request接收,request類似Servlet中的HttpRequestServlet)
			String s_num1=request.getParameter("num1");
			//接收第二個數
			String s_num2=request.getParameter("num2");
			//接收運算符號
			String flag=request.getParameter("flag");

			int num1=0;
			int num2=0;
			int result=0;
			
			System.out.println(s_num1);

			//java中 String ->int

			//爲了防止異常的發生,我們做一個處理
			if(s_num1!=null&&s_num2!=null&&flag!=null){
				num1=Integer.parseInt(s_num1);
			    num2=Integer.parseInt(s_num2);
				
				//計算
				if(flag.equals("+"))
				{
					result=num1+num2;
				}else if(flag.equals("-")){
					result=num1-num2;
				}else if(flag.equals("*")){
					result=num1*num2;
				}else{
					result=num1/num2;
				}
				//輸出結果
				//out.println("結果是:"+result);
			}
			
		%>
		<h1>我的計算器</h1>	
		<hr>
		<form name="form1" action="Cal.jsp">
			請輸入第一個數:<input type="text" size="6" name="num1" value="<%=num1 %>"><br/>
			<select name="flag">
				<option value=+>+</option>
				<option value=->-</option>
				<option value=*>*</option>
				<option value=/>/</option>
			</select><br/>
			請輸入第二個數:<input type="text" size="6" name="num2" value="<%=num2 %>"><br/>
			<input type="submit" value="計算" οnclick="return checkNum();"><!--點擊後會調用JavaScript腳本,這裏通過return返回給form-->
		</form>
		<hr>
		<!--這裏輸出計算的結果-->
	    計算結果是:<%=result %><!--表達式語法-->
	</body>
</html>

效果圖:


注:知識點補充

//接收第一個數(通過request接收,request類似Servlet中的HttpRequestServlet)
String s_num1=request.getParameter("num1");
//接收第二個數
String s_num2=request.getParameter("num2");
//接收運算符號
String flag=request.getParameter("flag");

如果這裏num1沒有的話,那麼s_num1的值爲null。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章