完成目標:利用MyEclipse和jQuery完成登錄驗證和獲取所填數據功能。
1.註冊頁面請求信息獲取
登錄界面代碼：
<%@ page language="java" import="java.util.*"
pageEncoding="utf-8" contentType="text/html;charset:utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>百度用戶註冊</title>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
function tijiao(){
alert("提交");
document.baseform.submit();
}
</script>
</head>
<body>
<form action="showbaidu.jsp" method="post" name="baseform">
<table border="1" >
<tr>
<td>用戶名：</td>
<td><input type="text" name="name"> 隻能輸入字母或者數字，4-16個字符</td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="text" name="pwd"> 密碼長度6-12位</td>
</tr>
<tr>
<td>確認密碼：</td>
<td><input type="text" name="pwd1"></td>
</tr>
<tr>
<td>性別：</td>
<td><input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td>電子郵件地址：</td>
<td><input type="text" name="mail">輸入正確的Email地址</td>
</tr>
<tr>
<td>興趣愛好：</td>
<td>
<input type="checkbox" name="sport" value="體育">體育
<input type="checkbox" name="sport" value="讀書">讀書
<input type="checkbox" name="sport" value="音樂">音樂
<input type="checkbox" name="sport" value="旅遊">旅遊
</td>
</tr>
</table>
<input type="button" value="同意以下條款並提交" style="float: left" id="bt" onclick="tijiao()">
<textarea rows="5" cols="30">
百度條款...
</textarea>
</form>
</body>
</html>
顯示頁面代碼：
<%@ page language="java" import="java.util.*"
pageEncoding="utf-8" contentType="text/html;charset:utf-8"%>
<%
request.setCharacterEncoding("utf-8");
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String name=request.getParameter("name");
String pwd=request.getParameter("pwd");
String pwd1=request.getParameter("pwd1");
String sex=request.getParameter("sex");
String mail=request.getParameter("mail");
String arr[]=request.getParameterValues("sport");
%>
<html>
<head>
<base href="<%=basePath%>">
<title>百度用戶註冊信息</title>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<p> 用戶名：<%=name%> </p>
<p> 密碼：<%=pwd%> </p>
<p> 確認密碼：<%=pwd1%> </p>
<p> 性別：<%=sex%> </p>
<p> 郵箱地址：<%=mail%> </p>
<p>
興趣愛好：
<% for(int i=0;i<arr.length;i++){ %>
<%=arr[i]%>
<% } %>
</p>
</body>
</html>
效果：
2.與數據庫相連，並且驗證登錄功能。vc3Ryb25nPjwvcD4KPHA+PHN0cm9uZz7Su7j2vPK1pbXEtcfCvL3nw+ajqNb30qrOqsHLsuLK1LmmxNyjqaO6PC9zdHJvbmc+PC9wPgo8cD48c3Ryb25nPjwvc3Ryb25nPjwvcD4KPHByZSBjbGFzcz0=”brush:sql;”><%@ page language="java" import="java.util.*"
pageEncoding="utf-8" contentType="text/html;charset:utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>登錄</title>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script>
function tijiao(){
document.baseform.submit();
}
</script>
</head>
<body>
<form action="shujuku.jsp" method="post" name="baseform">
<table>
<tr>
<td>用戶名:<input type="text" name="uname"></td>
</tr>
<tr>
<td>密碼:<input type="text" name="upwd"></td>
</tr>
</table>
<input type="button" id="login" value="登錄" onclick="tijiao()">
</form>
</body>
</html>
所轉到jsp文件代碼（與數據庫相連代碼）：
<%@ page language="java" contentType="text/html;charset=utf-8"%>
<%@ page import="java.util.*"%>
<%@ page import="java.text.*"%>
<%@ page import="java.sql.*" %>
<%@ page import="com.mysql.jdbc.Driver" %>
<%
String flag="0";
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
//驅動程序名
String driverName = "com.mysql.jdbc.Driver";
//數據庫用戶名
String userName = "root";
//密碼
String userPasswd = "ffffff";
//數據庫名
String dbName = "shcoolapp";
//聯結字符串
String url = "jdbc:mysql://localhost/" + dbName
+ "?user="+ userName
+ "&password=" + userPasswd
+ "&useUnicode=true&characterEncoding=gbk";
request.setCharacterEncoding("utf-8");
String uName=request.getParameter("uname");
String upwd=request.getParameter("upwd");
try{
Class.forName(driverName);
Connection con=DriverManager.getConnection(url);
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("SELECT * FROM users where user_name='"+uName+"' and pwd='"+upwd+"'");
if(rs.next()){
String dName=rs.getString("DISPLAY_NAME");
response.sendRedirect("baidu.jsp");
} /* else{
response.setHeader("REFRESH","4;url=login.jsp");
} */
/* while(rs.next()){
String name=rs.getString("USER_NAME");
String pwd=rs.getString("PWD");
String dname=rs.getString("DISPLAY_NAME");
out.println("用戶名:"+name);
out.println("密碼:"+pwd);
out.println("名稱:"+dname+"<br>"); */
con.close();
}catch(Exception e){
e.printStackTrace();
}
%>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8">
<title>JSP訪問數據庫</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
$(function(){
if($('#flag').val()=="0"){
setTimeout(function(){
window.location.href="login.jsp";
/* $("form").attr("action","login.jsp");
$("form").submit(); */
// document.baseForm.action = "login.jsp";
// document.baseForm.submit();
},4000);
}
});
</script>
</head>
<body>
<form action="" method="post" name="baseform">
<input type="hidden" value='<%=flag%>' id="flag">
中間等待畫面
</form>
</body>
</html>
效果（登錄成功，跳轉到一個界面。登錄失敗3秒後跳回到登錄界面）
數據庫數據：
登錄界面顯示：
3.將數據動態添加到表格中，並且表格單雙行顏色不通，鼠標移動時，點擊時顏色發生變化。
<%@ page language="java" pageEncoding="utf-8"
contentType="text/html;charset:utf-8"%>
<%@ page import="java.util.*"%>
<%@ page import="com.jredu.java.*"%>
<%@ page import="com.jredu.web.service.*"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
List<Student> list=new ArrayList();
StudentService studentservice=new StudentService();
list=studentservice.selectAll();
%>
<html>
<head>
<base href="<%=basePath%>">
<title>學生</title>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="css/student.css" type="text/css"></link>
<script>
$(function(){
$("tr:odd").css("background","#98FB98");
$("tr:even").css("background","#7FFFD4");
$("td").attr("align","center");
var trColor ;
$("tr").click(function () {
$("tr:odd").css("background","#98FB98");
$("tr:even").css("background","#7FFFD4");
$(this).css("background","#FF69B4");
$(this).attr("check","1");
})
$("tr").mouseover(function () {
if($(this).attr("check")=="1"){
return;
}
trColor= $(this).css("background");
$(this).css("background","#FFFF00");
}).mouseout(function () {
if($(this).attr("check")=='1'){
return;
}
$(this).css("background",trColor);
});
});
</script>
</head>
<body>
<table class="table">
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>住址</td>
<td>電話</td>
</tr>
<%for(int i=0;i<list.size();i++){
Student st =new Student();
st=list.get(i);%>
<tr>
<td><%=st.getName() %></td>
<td><%=st.getAge() %></td>
<td><%=st.getSexId() %></td>
<td><%=st.getAddress() %></td>
<td><%=st.getPhone() %></td>
</tr>
<%} %>
</table>
</body>
</html>
src下的java類代碼：
package com.jredu.java;
/**
* @author Administrator
*
*/
public class Student {
private String name;
private int age;
private String sexId;
private String address;
private String phone;
public Student(){};
public Student(String name, int age, String sexId, String address,
String phone) {
super();
this.name = name;
this.age = age;
this.sexId = sexId;
this.address = address;
this.phone = phone;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getSexId() {
return sexId;
}
public void setSexId(String sexId) {
this.sexId = sexId;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
}
src下的java代碼：
package com.jredu.web.service;
import java.util.ArrayList;
import java.util.List;
import com.jredu.java.Student;
public class StudentService {
public List<Student> selectAll(){
List<Student> list=new ArrayList<Student>();
Student stu=new Student("張三",20,"男","煙臺","0532-86995178");
list.add(stu);
stu=new Student("李四",21,"男","青島","0533-86995178");
list.add(stu);
stu=new Student("王五",22,"男","濟南","0534-86995178");
list.add(stu);
stu=new Student("趙六",23,"女","隔壁","0535-86995178");
list.add(stu);
stu=new Student("楊七",24,"女","老王","0536-86995178");
list.add(stu);
stu=new Student("武八",25,"女","的傢","0537-86995178");
list.add(stu);
return list;
}
}
效果：（表格本身顏色為淺綠和深綠兩種顏色，點擊時變紫色，鼠標移動到上面時變黃色）
