JSP 简单入门教学（2）: 点击按钮实现两数相加加法运算的两种实现方法

我们要实现页面效果：

了解过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>

举一反三，我们可以融合一些以前学过的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>

标签：运算方法两种加法按钮

免责声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕。