JSP 簡單入門教學（2）: 點選按鈕實現兩數相加加法運算的 兩種 實現方法
阿新 • • 發佈：2019-01-31
我們要實現頁面效果：
瞭解過html的都知道，提交資料用的是form表單，表單中的內容是被髮送出去的內容。
大部分開發都是這樣的，先畫ui後考慮功能，所以我們先用程式碼表示出這個介面：
<form action="" method="get"> <h1>加法計算</h1> <!-- h1表示標題大小級數，還有h2,h3....數字越大則標題字大小越小 --> 運算元1<input name="num1"><br> <!-- name值的作用是用來根據名字取引數的，相當於“鍵值對” --> 運算元2<input name="num2"><br> <input type="submit" value="計算"> </form>
然後我們考慮我們的邏輯程式碼：
<%
int a=Integer.parseInt(request.getParameter("num1"));
int b=Integer.parseInt(request.getParameter("num2"));
out.print(a+b);
%>解釋一下，因為在jsp中，request屬於9個內建函式中的一員，所以不用例項化（即不用建立物件），這是屬於jsp的內建物件，所以進行純java開發的時候不能這麼寫。
執行，噫！報錯了？
我們觀看出錯資訊（紅色劃線處）可以知道：變數被賦予了null值 （ 這是新手最最最最容易犯的錯 ）
原來是因為 jsp 剛執行的時候，輸入框內都是沒有值的，所以這時候直接輸出a+b就會輸出null+null。
為了解決這個錯誤，我們必須設定 if 語句判斷值是否為空，所以完整程式碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <!-- 表單內的內容是被髮送出去的內容,action表示提交給誰，不寫就預設提交給自己。method是提交資訊的方式:get,post --> <!-- get是明碼提交 ，post則暗中操作--> <!-- 下面是ui介面程式碼 --> <form action="" method="get"> <h1>加法計算</h1> <!-- h1表示標題大小級數，還有h2,h3....數字越大則標題字大小越小 --> 運算元1<input name="num1"><br> 運算元2<input name="num2"><br> <input type="submit" value="計算"> </form> <% //這個是邏輯程式碼 String num1=request.getParameter("num1"); String num2=request.getParameter("num2"); if(num1!=null&&num2!=null){ int a=Integer.parseInt(num1); int b=Integer.parseInt(num2); out.print(a+b); //雖然out.print(a+b)和<%=a+b>等效，但是寫在這裡面是錯誤的，因為表示式是相互獨立的，不能互相巢狀 //和System.out.print(a+b);也等效啦，但是一個是顯示在頁面的，一個是顯示在控制檯中的 } %> </body> </html>
還有另一種實現方式，通過按鈕的點選事件：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="" method="get" name="abadd"> <!-- 這一行有所修改，新增了特定name值 -->
<h1>加法計算</h1>
運算元1<input name="num1"><br>
運算元2<input name="num2"><br>
<input type="button" value="計算" onclick="add()" > <!-- 這一行有所修改：表示當點選按鈕時觸發add()事件 -->
</form>
<!-- 新增下面的 -->
<script language="javascript">
function add(){
document.abadd.submit(); //表示觸發了名為abadd的表單的資料提交
}
</script>
<%
String num1=request.getParameter("num1");
String num2=request.getParameter("num2");
if(num1!=null&&num2!=null){
int a=Integer.parseInt(num1);
int b=Integer.parseInt(num2);
out.print(a+b);
}
%>
</body>
</html> <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="" method="get" name="abadd"><!-- 表單內的內容是被髮送出去的內容,action表示提交給誰，不寫就預設提交給自己，method是提交方式 -->
<h1>加法計算</h1>
運算元1<input type="text" name="num1"><br>
運算元2<input type="text" name="num2"><br>
<input type="radio" name="op" value="1">加法 <br><!-- 加法和減法的name都相同是為了保證它們都是同一組選擇按鈕，而不是單獨的可選按鈕 -->
<input type="radio" name="op" value="2">減法<br> <!-- 正因為name是相同的，所以同組的通過value來獲取例項 -->
<input type="submit" value="計算" onclick="add()" >
</form>
<%
int a=0,b=0; //區域性變數要記得賦初值
String str1=request.getParameter("num1");
String str2=request.getParameter("num2");
String op_value=request.getParameter("op");
if(str1!=null&&str2!=null){
a=Integer.parseInt(str1);
b=Integer.parseInt(str2);
}
if(op_value!=null)
switch(op_value){
case "1":
out.print(a+b);
break;
case "2":
out.print(a-b);
break;
default:
out.print("異常");
break;
}
%>
</body>
</html>