JSP与JavaScript交互之（一）成绩信息输入的奖学金评定

Enovo_你当像鸟飞往你的山

于 2022-10-02 11:21:00 发布

阅读量3.2w

点赞数 4

本文链接：https://blog.csdn.net/m0_63244368/article/details/127141207

版权

Hello，world！

今天我们学习JSP以及JS相关内容！！！

宝剑锋从磨砺出，梅花香自苦寒来。

——《警世贤文》

🏔关于JSP：

JSP（全称JavaServer Pages）是由Sun Microsystems公司主导创建的一种动态网页技术标准。JSP部署于网络服务器上，可以响应客户端发送的请求，并根据请求内容动态地生成HTML、XML或其他格式文档的Web网页，然后返回给请求者。JSP技术以Java语言作为脚本语言，为用户的HTTP请求提供服务，并能与服务器上的其它Java程序共同处理复杂的业务需求。

是一种基于Java语言的Web开发，三个特点：安全，跨平台，动态。

Model 1：.jsp(页面)+JavaBean (数据存取)

Model 2: M(JavaBean)V(JSP)C(Servlet)模式

🏔 关于JS：

JavaScript（简称js）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

🐒设计要求：

（1）网站页面数量不少于3个，文件命名规范，网站结构要求层次清楚，目录结构清晰，代码缩进规整。（4分）

（2）采用HTML结构标记（或JSP标记 / JavaScript代码等）+CSS进行整体布局定位。（5分）

（3）网站首页栏目数量不能少于3个，各栏目要能正确链接到相应栏目子页面，同时各栏目页面也能正确返回到网站首页。（3分）

（4）网站页面标题、图片图标等要符合网站主题。（2分）

（5）网站页面中要含有表单（form）。（3分）

（6）网站使用if语句进行奖学金判定。（4分）

（7）网站存在JSP与JS交互。（3分）

（8）网站内容应具有原创性，内容充实。（7分）

（9）网站整体色系符合视觉习惯，布局合理美观。（4分）
————————————————

🐒主页——index.jsp

此页面主要使用了form表单，sublime按钮，if语句，以及function函数，包含输入用户名，三科成绩等内容。如下如所示：

根据图片可以看出，我们的index页面内容非常简单，但是话说，麻雀虽小五脏俱全，我们编写还是比较完整的。话不多说，上代码！

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<!-- 在JSP中添加javascript代码，防止用户空提交 -->
<script language="javascript">
	function checkValidate() {
		//判断用户名是否为空
		if (document.myform.username.value == ""
				|| document.myform.username.value == null) {
			window.alert("用户名不能为空！！！");
			return false;
		}
		//判断A01是否为空
		if (document.myform.a01.value == ""
				|| document.myform.a01.value == null
				|| document.myform.a02.value == ""
				|| document.myform.a02.value == null
				|| document.myform.a03.value == ""
				|| document.myform.a03.value == null) {
			window.alert("输入成绩不能为空！！！");
			return false;
		}
	}
</script>
</head>
<body>
	<form method="get" name="myform" action="Grade_a.jsp">
		<p>&nbsp;请输入你的姓名:</p>
		<p>
			&nbsp;姓名: <input type="text" placeholder="请输入你的姓名" name="username">
		</p>
		<p>&nbsp;请分别输入你的成绩:</p>
		<p>
			&nbsp;A01: <input type="number" placeholder="请输入A01课程成绩" name="a01">
		</p>
		<p>
			&nbsp;A02: <input type="number" placeholder="请输入A02课程成绩" name="a02">
		</p>
		<p>
			&nbsp;A03: <input type="number" placeholder="请输入A03课程成绩" name="a03">
		</p>
		<p>
			&nbsp;<input type="submit" value="提交" name="button1"
				onclick="return checkValidate();" /> <input type="reset"
				name="Reset" value="重置" />
		</p>
	</form>
</body>
</html>

🐒分页——G_Error.jsp

此页面主要是输出了用户输入错误成绩时的提示信息，在if语句判断后进行跳转，如下图：

如上图，此页面内容比较简单。上代码！

<%@ 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>
	<%
out.println("同学你好,你输入的成绩存在不实信息,请认真核对！");
%>
	<a href="index.jsp">返回主页面</a>
</body>
</html>

只有一个超链接，一个提示信息。大家可以和根据自己的题目要求进行相应更改。

🐒分页—— Grade_a.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>
	<%
String username=request.getParameter("username");
String a01 = request.getParameter("a01");
String a02 = request.getParameter("a02");
String a03 = request.getParameter("a03");
int A01=Integer.parseInt(a01);
int A02=Integer.parseInt(a02);
int A03=Integer.parseInt(a03);
int sum=A01+A02+A03;
out.println(username+"_同学。你好，你的总成绩为: "+sum+"分"+"<br/>");
if(sum>270&&sum<=300){
	out.println("恭喜你获得一等奖学金！🎇");
}
else if(sum>250&&sum<=270){
	out.println("恭喜你获得二等奖学金！☀");
}
else if(sum>230&&sum<=250){
	out.println("恭喜你获得三等奖学金！🌙");
}
else if(sum>180&&sum<=230){
	out.println("恭喜你成绩合格，准予毕业！");
}
else if(sum>=0&&sum<=180){
	out.println("成绩不及格，请努力学习!");
}
else{
	%>
	<jsp:forward page="G_Error.jsp"/>
	<%
}
%>
	<a href="index.jsp">返回主页面</a>

</body>
</html>

可以看出，此页面代码也是很简单的，都是基本内容，if语句，数据的接收等。

至此，我们的此篇博客就此结束了，写此篇内容的初衷是在初次尝试了在JSP页面中加入JavaScrpt代码，成功！但是，相应的，此篇博客内容相对简单，如果各位大佬发现内容错误，希望指出🙇‍！共同努力，后续还会继续更新！

部分内容来源： javascript、JSP、JS有什么区别和联系_百度知道 (baidu.com)

JavaScript_百度百科 (baidu.com)