登录页面判断是否输入用户名和密码，并使用ajax方式登录

最新推荐文章于 2023-06-21 13:16:24 发布

UserGuan

最新推荐文章于 2023-06-21 13:16:24 发布

阅读量9.4k

点赞数 6

分类专栏： Ajax类

本文链接：https://blog.csdn.net/AdminGuan/article/details/98790305

版权

Ajax类专栏收录该内容

5 篇文章 1 订阅

订阅专栏

准备函数

// 这是下面的简写；jQuery dom 页面加载完毕后执行，可执行多次
$(function() {
    
})

// 这是上面的全写；js 页面加载完毕后才执行，只能执行一次
$(document).ready(function() {
    
})

判断是否输入用户名和密码

使用ajax方式登录

后台servlet判断

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.3/css/layui.css" />
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.layuicdn.com/layer-v3.1.0/layer.js"></script>
</head>
<body>
<div class="layui-row layui-col-space5">
	<div class="layui-col-md4">
		<div class="grid-demo grid-demo-bg1"></div>
	</div>
	<div class="layui-col-md4">
		<div class="grid-demo">
			<fieldset class="layui-elem-field layui-field-title"
				style="margin-top: 50px;">
				<legend>用户登录</legend>
			</fieldset>
			<form>
				<span id="msg" style="margin-left: 18%; color: red"></span>
				<div style="margin-left: -20px;">
					<div class="layui-form-item">
						<label class="layui-form-label">用户名:</label>
						<div class="layui-input-block">
							<input type="text" name="username" id="username" lay-verify="title" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
						<div class="layui-input-block">
							<input type="password" name="password" id="password" lay-verify="title" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button type="button" id="login" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">立即登录</button>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="layui-col-md4">
		<div class="grid-demo grid-demo-bg1"></div>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		$("#login").on("click", function() {
			var username = $("#username").val();
			// var username = $("#username").val().trim(); // trim()去除空格
			var password = $("#password").val();
			if(!username) {
				$("#msg").html("用户名不能为空！");
				$("#username").focus(); // 聚焦
				return false;
			} else {
				if(!password) {
					$("#msg").html("密码不能为空！");
					$("#password").focus(); // 聚焦
					return false;
				} else {
					$("#msg").html("");
				}
			}
			$.ajax({
				type: "post", // post或get
				url: "${pageContext.request.contextPath}/login", // 提交路径
				data: {
					username: username,
					password: password
				},
                // dataType: "json", // 指定后台传来的数据是json格式
				success: function(data) {
					if (data == "true") {
						layer.msg('登陆成功！', {icon: 6});
						// 延迟跳转
						window.setTimeout("window.location='${pageContext.request.contextPath}/user?method=find'",900); 
					} else {
						layer.tips('用户名或密码错误！', '#login', {
							tips: [2, '#3595CC'],
							time: 4000
						});
					}
				},
				error: function(err) {}
			})
		})
	})
</script>
</body>
</html>

LoginServlet

package com.mybatis.servlet;

import java.io.IOException;
import java.io.PrintWriter;

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

import com.mybatis.dao.UserDao;
import com.mybatis.dao.impl.UserDaoImpl;
import com.mybatis.pojo.User;

/**
 * 
 * @ClassName: LoginServlet
 * @Description: 登录控制器，验证用户名和密码
 * @param:
 */
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
	
	private UserDao userDao = new UserDaoImpl();
	
	private static final long serialVersionUID = 1L;

	public LoginServlet() {

	}

	public void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		HttpSession session = request.getSession();
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		User user = new User();
		user.setUsername(username);
		user.setPassword(password);
		User u = userDao.login(user);
		boolean flag = false;//默认登录不成功
		if (u != null) {
			session.setAttribute("user", u);
			flag = true;
		} else {
			flag = false;
		}
		PrintWriter out = response.getWriter();
		out.print(flag);//返回登录信息
		out.flush();
		out.close();
	}

}

UserDao

package com.mybatis.dao;

import com.mybatis.pojo.User;

public interface UserDao {
	
	User login(User user);
	
}

UserDaoImpl

package com.mybatis.dao.impl;

import java.util.List;

import org.apache.ibatis.session.SqlSession;

import com.mybatis.dao.UserDao;
import com.mybatis.pojo.User;
import com.mybatis.pojo.common.Page;
import com.mybatis.utils.MyBatisUtil;

public class UserDaoImpl implements UserDao {

	/**
	 * 
	 * @Title: login
	 * @Description: 登录查询
	 * @param: @param user
	 * @param: @return
	 * @see com.mybatis.dao.UserDao#login(com.mybatis.pojo.User)
	 */
	@Override
	public User login(User user) {
		User u = null;
		SqlSession sqlSession = null;
		try {
			sqlSession = MyBatisUtil.getSqlSession();
			u = sqlSession.selectOne(User.class.getName() + ".login", user);
		} finally {
			MyBatisUtil.close(sqlSession);
		}
		return u;
	}

}

UserMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- dtd是对配置文件的约束，配置文件必须根据它的规定写 -->
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- 设置命名空间，使用实体的全路径 -->
<mapper namespace="com.mybatis.pojo.User">
	<!-- 登录查询 -->
	<select id="login" parameterType="com.mybatis.pojo.User" resultType="com.mybatis.pojo.User">
		select * from t_user
		<where>
			<if test="username != null and username != ''">
				username = #{username} and
			</if>
			<if test="password != null and password != ''">
				password = #{password}
			</if>
		</where>
		<!-- 或 -->
		<!-- <trim prefix="where" prefixOverrides="and | or">
			<if test="username != null and username != ''">
				and username = #{username}
			</if>
			<if test="password != null and password != ''">
				and password = #{password}
			</if>
		</trim> -->
	</select>
</mapper>

UserGuan

关注

6
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
登录页面判断是否输入用户名和密码，并使用ajax方式登录

准备函数// 这是下面的简写；jQuery dom 页面加载完毕后执行，可执行多次$(function() { })// 这是上面的全写；js 页面加载完毕后才执行，只能执行一次$(document).ready(function() { })判断是否输入用户名和密码使用ajax方式登录后台servlet判断lo...
复制链接

扫一扫