JavaScript/Jsp 数据读取和request访问数据库

ゝ一世哀愁。 2022-07-16 11:49 188阅读 0赞

**完成目标:利用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" ο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%>">
        <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>

**效果：**

**![Center][]  
![Center 1][]**

**2.与数据库相连，并且验证登录功能。**

**一个简单的登录界面（主要为了测试功能）：**

**所转到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>
    	
    	<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秒后跳回到登录界面）**

**数据库数据：![Center 2][]**

**登录界面显示：![Center 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;
       }
    }

效果：（表格本身颜色为浅绿和深绿两种颜色，点击时变紫色，鼠标移动到上面时变黄色）  
![Center 4][]

[Center]: /images/20220716/f05efa919d24409b869818164e309073.png
[Center 1]: /images/20220716/19e5d669ef59471798b496e732b414a4.png
[Center 2]: /images/20220716/e2107c75a62541789d8dbbaf4a0d0b42.png
[Center 3]: /images/20220716/0ce3a14587f84343875b4b1d6272797d.png
[Center 4]: /images/20220716/5d806af294a74fb68a9670aee8aecf95.png