當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

图解JSP页面教程

發(fā)布時間：2025/4/14 javascript 40 豆豆

生活随笔收集整理的這篇文章主要介紹了图解JSP页面教程小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

??? 所有Demo可以下載，鏈接在尾部。

一簡單JSP頁面

1 hello world

代碼

<html>
??? <head>
?<title>第一個JSP程序</title>
??? </head>
??? <body>
?<%
?out.println("Hello World!");
?%>
??? </body>
</html>

效果：

2 JSP生命周期

代碼

<%@ page contentType="text/html; charset=GB2312" %>
<html><head><title>life.jsp</title></head><body>

<%!
? private int initVar=0;
? private int serviceVar=0;
? private int destroyVar=0;
%>
?
<%!
? public void jspInit(){
??? initVar++;
??? System.out.println("jspInit(): JSP被初始化了"+initVar+"次");
? }
? public void jspDestroy(){
??? destroyVar++;
??? System.out.println("jspDestroy(): JSP被銷毀了"+destroyVar+"次");
? }
%>

<%
? serviceVar++;
? System.out.println("_jspService(): JSP共響應了"+serviceVar+"次請求");

? String content1="初始化次數 : "+initVar;
? String content2="響應客戶請求次數 : "+serviceVar;
? String content3="銷毀次數 : "+destroyVar;
%>

</body></html>

?效果：

3 獲取自己的IP

代碼：

<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>

效果：

4 獲取日期

代碼

<html>
<head><title>A Comment Test</title></head>
<body>
<p>
?? Today's date: <%= (new java.util.Date()).toLocaleString()%>
</p>
</body>
</html>

效果：

5 if-else

代碼

<%! int day = 3; %>
<html>
<head><title>IF...ELSE Example</title></head>
<body>
<% if (day == 1 | day == 7) { %>
????? <p> Today is weekend</p>
<% } else { %>
????? <p> Today is not weekend</p>
<% } %>
</body>
</html>

6 switch

<%! int day = 3; %>
<html>
<head><title>SWITCH...CASE Example</title></head>
<body>
<%
switch(day) {
case 0:
?? out.println("It\'s Sunday.");
?? break;
case 1:
?? out.println("It\'s Monday.");
?? break;
case 2:
?? out.println("It\'s Tuesday.");
?? break;
case 3:
?? out.println("It\'s Wednesday.");
?? break;
case 4:
?? out.println("It\'s Thursday.");
?? break;
case 5:
?? out.println("It\'s Friday.");
?? break;
default:
?? out.println("It's Saturday.");
}
%>
</body>
</html>

效果：

7 for

<%! int fontSize; %>
<html>
<head><title>FOR LOOP Example</title></head>
<body>
<%for ( fontSize = 1; fontSize <= 3; fontSize++){ %>
?? <font color="green" size="<%= fontSize %>">
??? JSP Tutorial
?? </font><br />
<%}%>
</body>
</html>

效果：

8 include

<html>
<head>
<title>The include Action Example</title>
</head>
<body>
<center>
<h2>The include action Example</h2>
<jsp:include page="date.jsp" flush="true" />
</center>
</body>
</html>

效果：

9 使用Bean

建立TestBean.java,

package action;
?
public class TestBean {
?? private String message = "No message specified";
?
?? public String getMessage() {
????? return(message);
?? }
?? public void setMessage(String message) {
????? this.message = message;
?? }
}

然后用javac命令編譯為class文件；

測試jsp頁：

?<html>
<head>
<title>Using JavaBeans in JSP</title>
</head>
<body>
<center>
<h2>Using JavaBeans in JSP</h2>
?
<jsp:useBean id="test" class="action.TestBean" />
?
<jsp:setProperty name="test"
??????????????????? property="message"
??????????????????? value="Hello JSP..." />
?
<p>Got message....</p>
?
<jsp:getProperty name="test" property="message" />
?
</center>
</body>
</html>

把class文件拷貝到如下目錄；

運行測試頁，結果如下；

二項目上的簡單JSP頁

1 一個精簡登陸JSP，未連數據庫

<%@ page language="java" contentType="text/html;charset=gb2312"%>
<html>
?<head>
? <title>登陸</title>
?</head>
?<body>
? <form method="POST" name="frmLogin" action="LoginServlet">
?? <h1 align="center">用戶登錄</h1><br />
?? <center>
??? <table border=1>
???? <tr>
????? <td>用戶名：</td>
????? <td>
?????? <input type="text" name="username" value="Your name" size="20" maxlength="20" οnfοcus="if (this.value=='Your name')? this.value='';" />
????? </td>
???? </tr>
???? <tr>
????? <td>密  碼：</td>
????? <td>
?????? <input type="password" name="password" value="Your password" size="20" maxlength="20" οnfοcus="if (this.value=='Your password')? this.value='';" />
????? </td>
???? </tr>
???? <tr>
????? <td>
?????? <input type="submit" name="Submit" value="提交" onClick="return validateLogin()" />
????? </td>
????? <td>
?????? <input type="reset" name="Reset" value="重置" />
????? </td>
???? </tr>
??? </table>
?? </center>
? </form>
? <script language="javascript">
?? function validateLogin(){
??? var sUserName = document.frmLogin.username.value ;
??? var sPassword = document.frmLogin.password.value ;
??? if ((sUserName =="") || (sUserName=="Your name")){
???? alert("請輸入用戶名!");
???? return false ;
??? }
???
??? if ((sPassword =="") || (sPassword=="Your password")){
???? alert("請輸入密碼!");
???? return false ;
??? }
?? }
? </script>
?</body>
</html>

效果：

2 三個的登陸頁

<%@ page language="java" contentType="text/html; charset=GB18030"??? pageEncoding="GB18030"%>
<%@ page import="java.util.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
? <title>登錄頁面</title>
</head>
<body>
? <form name="loginForm" method="post" action="judgeUser.jsp">
??? <table>
????? <tr>
??????? <td>用戶名:<input type="text" name="userName" id="userName"></td>
????? </tr>
????? <tr>
??????? <td>密碼:<input type="password" name="password" id="password"></td>
????? </tr>
????? <tr>
??????? <td><input type="submit" value="登錄" style="background-color:pink"><input type="reset" value="重置" style="background-color:red"></td>
?????????? </tr>
??? </table>
? </form>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=GB18030"??? pageEncoding="GB18030"%>
<%@ page import="java.util.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
? <title>身份驗證</title>
</head>
<body>
? <%
??? request.setCharacterEncoding("GB18030");
??? String name = request.getParameter("userName");
??? String password = request.getParameter("password");
??? if(name.equals("abc")&& password.equals("123"))
?{
? %>
? <jsp:forward page="afterLogin.jsp">
???? <jsp:param name="userName" value="<%=name%>"/>
? </jsp:forward>
? <%
?? }
?? else
?{
? %>
? <jsp:forward page="login.jsp"/>
? <%
?? }
? %>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=GB18030"??? pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
?<title>登錄成功</title>
</head>
<body>
? <%
?? request.setCharacterEncoding("GB18030");
?? String name = request.getParameter("userName");
?? out.println("歡迎你:" + name);
? %>
</body>
</html>

?總共3個jsp文件，第一個是login.jsp,第2個是judgeUser.jsp,第3個是afterLogin.jsp

效果：

3 一個簡單留言板

首先在MySQL中建立測試數據；如下圖，有時候難免也會輸入錯sql；

拷貝MySQL安裝目錄下的JDBC驅動到tomcat的lib目錄；

看了圖圖，再看下碼碼；

<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.sql.*"%>
<html>
<head>
?<title>JSP+JDBC 留言管理程序——登陸</title>
</head>
<body>
<center>
?<h1>留言管理范例 —— JSP + JDBC實現(xiàn)</h1>
?<hr>
?<br>
?<%
??// 編碼轉換
??request.setCharacterEncoding("GB2312") ;
??if(session.getAttribute("uname")==null)
??{
???// 用戶已登陸
?%>
?<%!
??String host="localhost"; //數據庫主機
??String database="test"; //數據庫名
??String user="root"; //用戶名
??String pass="123456ab"; //口令
??java.sql.Connection conn; //數據庫連接對象
??java.sql.Statement pstmt; //語句對象
??java.sql.ResultSet rs; //結果集對象
?%>
?<%
??// 如果有內容，則修改變量i，如果沒有，則根據i的值進行無內容提示
??int i = 0 ;
??String sql = null;
??String keyword = request.getParameter("keyword") ;
??// out.println(keyword) ;
??if(keyword==null)
??{
???// 沒有任何查詢條件
???sql = "SELECT id,title,author,content FROM note" ;
??}
??else
??{
???// 有查詢條件
???sql = "SELECT id,title,author,content FROM note WHERE title like ? or author like ? or

content like ?" ;
??}
??
??try
??{
???Class.forName("com.mysql.jdbc.Driver");
???conn= java.sql.DriverManager.getConnection("jdbc:mysql://"+host+"/"+database,user,pass);
???pstmt=conn.createStatement

(java.sql.ResultSet.TYPE_SCROLL_INSENSITIVE,java.sql.ResultSet.CONCUR_READ_ONLY);
???rs=pstmt.executeQuery (sql);
???// 如果存在查詢內容，則需要設置查詢條件
???if(keyword!=null)
???{
????// 存在查詢條件
????//pstmt.setString(1,"%"+keyword+"%") ;
????//pstmt.setString(2,"%"+keyword+"%") ;
????//pstmt.setString(3,"%"+keyword+"%") ;
???}

???//rs = pstmt.executeQuery() ;
?%>
<form action="list_notes.jsp" method="POST">
?請輸入查詢內容：<input type="text" name="keyword">
?<input type="submit" value="查詢">
</form>
</h3><a href="insert.jsp">添加新留言</a></h3>
<table width="80%" border="1">
?<tr>
??<td>留言ID</td>
??<td>標題</td>
??<td>作者</td>
??<td>內容</td>
??<td>刪除</td>
?</tr>
?<%
???while(rs.next())
???{
????i++ ;
????// 進行循環(huán)打印，打印出所有的內容，以表格形式
????// 從數據庫中取出內容
????int id = rs.getInt(1) ;
????String title = rs.getString(2) ;
????String author = rs.getString(3) ;
????String content = rs.getString(4) ;

????if(keyword!=null)
????{
?????// 需要將數據返紅
?????title = title.replaceAll(keyword,"<font color=\"red\">"+keyword+"</font>")

;
?????author = author.replaceAll(keyword,"<font color=\"red\">"+keyword

+"</font>") ;
?????content = content.replaceAll(keyword,"<font color=\"red\">"+keyword

+"</font>") ;
????}
?%>
????<tr>
?????<td><%=id%></td>
?????<td><a href="update.jsp?id=<%=id%>"><%=title%></a></td>
?????<td><%=author%></td>
?????<td><%=content%></td>
?????<td><a href="delete_do.jsp?id=<%=id%>">刪除</a></td>
????</tr>
?<%
???}
???// 判斷i的值是否改變，如果改變，則表示有內容，反之，無內容
???if(i==0)
???{
????// 進行提示
?%>
????<tr>
?????<td colspan="5">沒有任何內容！！！</td>
????</tr>
?<%
???}
?%>
</table>
?<%
???rs.close() ;
???pstmt.close() ;
???conn.close() ;
??}
??catch(Exception e)
??{}
?%>
?<%
??}
??else
??{
???// 用戶未登陸，提示用戶登陸，并跳轉
???response.setHeader("refresh","2;URL=login.jsp") ;
?%>
???您還未登陸，請先登陸！！！<br>
???兩秒后自動跳轉到登陸窗口！！！<br>
???如果沒有跳轉，請按<a href="login.jsp">這里</a>！！！<br>
?<%
??}
?%>
</center>
</body>
</html>

RUN；

4 一個jquery easy ui 的GRID

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
??? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<body>
??????????? <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
??url=""
??toolbar="#toolbar"
??rownumbers="true" fitColumns="true" singleSelect="true">
?<thead>
??<tr>
???<th field="firstname" width="50">First Name</th>
???<th field="lastname" width="50">Last Name</th>
???<th field="phone" width="50">Phone</th>
???<th field="email" width="50">Email</th>
??</tr>
?</thead>
</table>
<div id="toolbar">
?<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a>
?<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a>
?<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyUser()">Remove

User</a>
</div>

</body>

</html>

當前沒有數據，easy ui 可以不要js簡單創(chuàng)建視覺效果不錯的GRI

??? 代碼下載：

http://pan.baidu.com/s/1pJyrHxT

總結

以上是生活随笔為你收集整理的图解JSP页面教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：详细图解JDK+Tomcat Web开发
下一篇：搞定JSP第一个Servlet例子并且还