JSP简介及简单案例
Servlet做界面非常困难, 而JSP做页面非常容易, JSP = html + Java片段 + jsp标签 + js(css), 用于做前端.
(1) 指令
1. page
<%@ page contentType="text/html;charset=utf-8"%>
2. include
<%@ include file="filename"%>
3. taglib
这个指令允许在jsp页面使用自定义标签, <myTag: yourTag num1="123">
(2) 脚本元素
简单理解为Java片段
(3) 动作元素
是使用xml语法写的, 是jsp规定的一种动作标准, 遇到动作元素会有相应的执行动作
(4) 九大内置对象[JSP的核心]
out request response session application pageContext exception page config
可以直接调用, 不需要创建
(5) 访问JSP的过程
浏览器第一次访问JSP页面时, 在Tomcat中先将*.jsp转.java(就是一个servlet), 然后编译成.class加载到内存中, 所以第一次访问会比较慢,
第二次访问的时候速度很快, 相当于直接访问.class
------------------------------------------------
1. jsp和servlet是互相对应的
2. servlet是jsp的基础
<!-- 声明我是一个jsp文件, 编码格式utf-8 -->
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<body>
<h1>JSP</h1>
<%
out.print("hello world, 世界, 您好!");
%>
</body>
</html>
---------------------------------------------------------------------
范例1: 计算器
myCal.jsp:
<%@ page contentType="text/html;charset=gb2312" %>
<html>
<head>
<script>
function checkNum() {
// 一、是否为空
if (form1.num1.value == "" || form1.num2.value == "") {
window.alert("数据不能为空,请输入...") ;
return false ;
}
// 二、是否为数字(整数、小数、负数)
if (!(/^(-)?\d+(\.\d+)?$/.test(form1.num1.value)
&& /^(-)?\d+(\.\d+)?$/.test(form1.num2.value))) {
window.alert("输入的不是数字,请重新输入...") ;
return false ;
}
// 三、除数是否为零
if (form1.num2.value == 0) {
window.alert("除数不能为零,请重新输入...") ;
return false ;
}
}
</script>
</head>
<body>
<%
// 以下是Java片段
// 一、接收从myCal.jsp传递过来的数据及运算符
String s_num1 = request.getParameter("num1") ;
String s_num2 = request.getParameter("num2") ;
String s_flag = request.getParameter("flag") ;
// 二、声明变量以及转换数据类型
double num1 = 0 ;
double num2 = 0 ;
double result = 0 ;
/*
* 当用户第一次打开myCal.jsp页面时,s_num1和s_num2都为空,
* 导致NumberFormatException异常,为避免这种情况,加if判断
*/
if ((s_num1 != null) && ((s_num2 != null)) && ((s_flag != null))) {
num1 = Double.parseDouble(s_num1) ;
num2 = Double.parseDouble(s_num2) ;
// 三、进行四则运算
if (request.getParameter("flag").equals("+")) {
// 3.1 加法计算
result = num1 + num2 ;
} else if (request.getParameter("flag").equals("-")) {
// 3.2 减法计算
result = num1 - num2 ;
} else if (request.getParameter("flag").equals("*")) {
// 3.3 乘法计算
result = num1 * num2 ;
} else {
// 3.4 除法计算
result = num1 / num2 ;
}
}
%>
<h2>我的计算器</h2>
<hr>
<form action="myCal.jsp" name="form1">
请输入第一个数:<input type="text" size="20" name="num1" value="<%=num1%>"><br><br>
请选择运算法则:
<select name="flag">
<option value=+>+</option>
<option value=->-</option>
<option value=*>×</option>
<option value=/>÷</option>
</select>
<br><br>
请输入第二个数:<input type="text" size="20" name="num2" value="<%=num2%>"/>
<!-- 当点击计算按钮,立刻触发onclick,进行checkNum验证,
如果返回true,则跳转到myResult.jsp
如果返回false,则弹出提示框,留在本页面
-->
<input type="submit" value="计 算" onclick="return checkNum();">
</form>
<hr><br>
<h2>计算结果:<%= result %></h2>
<hr>
</body>
</html>
测试: