ajax & JQuery 实现用户登录

最新推荐文章于 2022-11-01 10:22:40 发布

侠骨柔情冷郎君

最新推荐文章于 2022-11-01 10:22:40 发布

阅读量996

点赞数 2

分类专栏：代码片段文章标签： ajax JQuery 用户登录

本文链接：https://blog.csdn.net/weixin_45608945/article/details/103260346

版权

代码片段专栏收录该内容

4 篇文章 0 订阅

订阅专栏

servlet代码

@WebServlet("/findUserDataBase")
public class FindUserDataBase extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取用户名 查询是否存在
        response.setContentType("application/json;charset=utf-8");
        String username = request.getParameter("username");

        //将得到的用户名封装为对象
        User user = new User();
        user.setUsername(username);

        //调用方法 查询是否存在
        UserInterface userDao = new UserDao();
        User fallUsername = userDao.fallUsername(user);

        //创建map集合 将
        Map<String, String> map = new HashMap<>();
        if (fallUsername == null) {
            //用户名可用
            map.put("exist", "true");
            map.put("msg", "用户名可用");
        } else {
            map.put("notExist", "false");
            map.put("msg", "用户名太受欢迎");
        }
        //将map对象转换为 json字符穿
        ObjectMapper mapper = new ObjectMapper();

        String s = mapper.writeValueAsString(map);
        System.out.println(s);   //结果打印到控制台
        //将信息显示在浏览器
        mapper.writeValue(response.getWriter(), map);

Html

<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //入口函数
        $(function () {
            $("#username").blur(function () {  //离焦事件
                let username = $(this).val();
                $.get("/findUserDataBase", {"username": username}, function (data) {

                    let span = $("#s_username");

                    if (data.exist) {  //通过键获取值,true进方法体
                        span.css("color","green"); //设置字体
                        span.html(data.msg);
                    }else { // false
                        span.css("color","red");
                        span.html(data.msg);
                    }
                })
            })
        })


    </script>
</head>
<body>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<span id="s_username"></span>
<br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="submit" value="注册"><br>

</body>
</html>

JDBC工具类

public class Utils {
   private static DataSource ds;
   static {
       Properties p = new Properties();
       try {
           p.load(Objects.requireNonNull(Utils.class.getClassLoader().getResourceAsStream("druid.properties")));
           ds = DruidDataSourceFactory.createDataSource(p);
       } catch (Exception e) {
           e.printStackTrace();
       }
   }
   public static DataSource getDataSource(){
       return ds;
   }
}

定义查询数据库接口

public interface UserInterface {
    //查找数据库username是否存在
    User fallUsername(User username);
}

实现接口查询数据库返回对象

public class UserDao implements UserInterface {

    @Override
    public User fallUsername(User u) {

        try {
            JdbcTemplate jdbc = new JdbcTemplate(Utils.getDataSource());
            String sql = "SELECT * FROM  USER WHERE username = ?";
            return  jdbc.queryForObject(sql,new BeanPropertyRowMapper<>(User.class),u.getUsername());
        } catch (DataAccessException e) {
            return null;
        }
    }
}

定义User类

public class User {
   private String username;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    @Override
    public String toString() {
        return "User{" +
                "username='" + username + '\'' +
                '}';
    }
}

侠骨柔情冷郎君

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ajax & JQuery 实现用户登录

servlet代码@WebServlet("/findUserDataBase")public class FindUserDataBase extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletExcep...
复制链接

扫一扫