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

最新推荐文章于 2021-06-08 21:51:50 发布

aic1999

最新推荐文章于 2021-06-08 21:51:50 发布

阅读量1.4w

点赞数 9

分类专栏： jsp/js/struts2框架（前端网页开发）文章标签： jsp tomcat java html demo

本文链接：https://blog.csdn.net/aic1999/article/details/79818736

版权

jsp/js/struts2框架（前端网页开发）专栏收录该内容

24 篇文章 3 订阅

订阅专栏

我们要实现页面效果：

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

评论区有小伙伴指出代码运行不出来，我在tomcat8.5+ecplise内置浏览器上运行检查了三段代码，发现——只有这段代码的确运行不出来。

在反复检查测试后，我发现代码没错。原因挺无语的——把代码从CSDN复制到ecplise，会出现这样的错误：

代码中的οnclick="add()"中的"a"，变成了"ɑ"，所以找不到匹配的函数...

解决办法：手动敲一遍"add()"就行了。

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