jsp中文本框与按钮的使用方法

最新推荐文章于 2023-05-12 20:57:54 发布

爱睡觉的小馨

最新推荐文章于 2023-05-12 20:57:54 发布

阅读量6.9k

点赞数 5

分类专栏： JSP

本文链接：https://blog.csdn.net/qq_45696288/article/details/115352545

版权

JSP 专栏收录该内容

48 篇文章 12 订阅

订阅专栏

说明:
文本框与按钮都是通过< input >组件实现的,改变其type属性值可以对应不同的组件信息

下面通过一个实例来看一下文本框与按钮的使用:

要求: 在文本框输入一个数字,输出该数字的2倍数值.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="_a2_设置文本框与按钮.jsp" method="post"> <!-- action是存放提交页面的地址,这里提交到了本页面 -->
	请输入一个数:<input type="text" name="number"/>
			<input type="submit" value="提交"/>
</form>

<%
	int x = 0;
	String t = request.getParameter("number");//字符串的接收(接收的是文本框中的内容),这里注意request的使用
	if(t!=null && !"".equals(t)){
		x = Integer.parseInt(t);//如果文本框中输入的是数字,那么将数字型的字符串转换为数字整型
%>
		输出两倍的数据:<%= 2*x %>
<%	
		}else{
			out.print("输入的数据不能为空");
		}
%>


</body>
</html>

在这里插入图片描述

可以看出,当还没有输出信息的时候,直接将if语句中的else语句中的内容输出了,这就在页面上造成了内容输出控制的问题

改进方案:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="_a2_设置文本框与按钮2_2.jsp" method="post"> <!-- action是存放提交页面的地址,这里提交到了本页面 -->
	请输入一个数:<input type="text" name="number"/>
			<input type="submit" value="提交"/>
</form>

</body>
</html>

下面是_a2_设置文本框与按钮2_2.jsp代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<%
	int x = 0;
	String t = request.getParameter("number");//字符串的接收(接收的是文本框中的内容),这里注意request的使用
	if(t!=null && !"".equals(t)){
		x = Integer.parseInt(t);//如果文本框中输入的是数字,那么将数字型的字符串转换为数字整型
%>
		输出两倍的数据:<%= 2*x %>
<%	
		}else{
			out.print("输入的数据不能为空");
		}
%>


</body>
</html>

在这里插入图片描述

1、对于改进方案,是将原本的一个jsp文件分成了两个本分进行书写.
2、其中,一个是写form表单中的内容,一个是写接收form表单中的内容
3、form表单中的action属性所写的地址是接收form表单的jsp文件

要求: 在文本框输入一个数字,输出该数字的阶层的值

<%@ 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=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box{
width:400px;
height:50px;
background-color:lightblue;
text-align:center;
margin:100px auto;
}
</style>
</head>
<body>
	<div class="box">
		<form action="result.jsp">
			请输入一个数:<input type="text" name="number">
			<input type="submit" value="提交">
		</form>
	</div>
</body>
</html>

result.jsp

<%@ 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=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box{
width:400px;
height:50px;
background-color:lightblue;
text-align:center;
margin:100px auto;
}
</style>
</head>
<body>
	<%
		int n = Integer.parseInt(request.getParameter("number"));
		int result = 1;
		for(int i=1;i<=n;i++){
			result *= i;
		}
	%>
	<div class="box">
		<h4>结果为：<%=result %></h4>
	</div>
</body>
</html>

在这里插入图片描述

爱睡觉的小馨

关注

5
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
0
评论
jsp中文本框与按钮的使用方法

说明:文本框与按钮都是通过< input >组件实现的,改变其type属性值可以对应不同的组件信息下面通过一个实例来看一下文本框与按钮的使用:要求: 在文本框输入一个数字,输出该数字的2倍数值.<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><
复制链接

扫一扫