完成目标:利用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%>" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<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 >
<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" οnclick="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%>" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<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.與資料庫相連,并且驗證登入功能。
一個簡單的登入界面(主要為了測試功能):
<%@ 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%>" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<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="登入" οnclick="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%>" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<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" target="_blank" rel="external nofollow" >
-->
<script type="text/javascript">
$(function(){
if($('#flag').val()=="0"){
setTimeout(function(){
window.location.href="login.jsp" target="_blank" rel="external nofollow" ;
/* $("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%>" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<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" target="_blank" rel="external nofollow" 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;
}
}
效果:(表格本身顔色為淺綠和深綠兩種顔色,點選時變紫色,滑鼠移動到上面時變黃色)