jsp实现简单的登录

ajax+jdbc+servlet实现简单的登录

   这次主要是运用了ajax向服务器发请求,连接数据库进行查询,实现登录功能的,

用的是mysql数据库,在数据库中建了一个schools数据库,在这个数据库中建

了一个users表,包括三个字段,分别为uid,uname,pwd,创建完数据库记得

添加一条数据。下面详细说一下在eclispe中实现的代码。

 1、 首先,在eclipse中搭建web项目,如图

  2、开始写test.jsp页面,并且当你点击登录时,触发函数,发送ajax请求给服务器。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<title>欢迎你</title>

</head>
<body>

	<form action="" method="post">
		<label>用户名:</label><input type="text" name="uname" id="uname" placeholder="请输入用户名"><br>
		<label>密&nbsp;&nbsp;&nbsp;码:</label><input type="password" name="pwd" id="pwd" placeholder="请输入您的密码"><br>
		<input type="button" value="登录" οnclick="login()">
	</form>
	
	<script>
		function login(){
			//先获取表单中输入的用户名和密码
			var uname=$("#uname").val();
			var pwd=$("#pwd").val();
			
			//发送ajax请求
			$.post("usersServlet",{
				//将uname和pwd传过去
				uname:uname,
				pwd:pwd
			},function(data){
				if(data>0){
					alert("登录成功");
					location.href="index.jsp";
				}else{
					alert("用户名或者密码错误");
					location.href="test.jsp";
				}
			},"text");
		}
	</script>
</body>
</html>

3、创建一个index.jsp页面,当登录成功后,跳转此页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎你</title>
</head>
<body>
<%
	String uname=null;
	if(request.getSession().getAttribute("uname")!=null){
		uname=request.getSession().getAttribute("uname")+"";
	}
%>
<p>欢迎您<%=uname %></p>
</body>
</html>

4、创建一个UserServlet.java,进行对前端传来的数据进行处理,

并且与数据库建立连接,查询数据库,将结果返回给前端页面

package com.login.web.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/usersServlet")
public class UserServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//首先设置编码集
		req.setCharacterEncoding("utf-8");
		resp.setCharacterEncoding("utf-8");
		
		//获取输出PrintWriter对象
		PrintWriter out=resp.getWriter();
		
		//获取传过来用户名和密码 然后与数据库建立连接进行查询是否有此用户
		String uname=req.getParameter("uname");
		String pwd=req.getParameter("pwd");
		
		Connection conn;
		Statement stmt;
		ResultSet rs;
		try {
			//第一步加载驱动  这里用到的是mysql数据库
			Class.forName("com.mysql.jdbc.Driver");
			//第二步建立连接													// 数据库名              用户名           密码
			conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/schools", "root", "a");
			//第三步创建statement对象
			stmt=conn.createStatement();
			//第四步执行sql语句								一定记得加''  
			String sql="select * from users where uname='"+uname+"' and pwd='"+pwd+"' ";
			rs=stmt.executeQuery(sql);
			//判断数据库中是否存在这个用户
			//如果登录成功
			while(rs.next()){
				if(rs.getString(1)!=null ||rs.getString(1).equals("")){
					//用Session存下用户名
					req.getSession().setAttribute("uname", uname);
					//返回前端页面结果
					out.print(1);
				}else{
					out.print(0);
				}
			}
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		} 
	}
	
}

5、最终效果如下

发布了8 篇原创文章 · 获赞 1 · 访问量 515

猜你喜欢

转载自blog.csdn.net/weixin_45003796/article/details/102829266