用户名的检验是否存在案例补充了数据库查询

最新推荐文章于 2024-07-23 20:39:33 发布

台南没有木

最新推荐文章于 2024-07-23 20:39:33 发布

阅读量245

点赞数

文章标签： ajax 数据库 jquery json

本文链接：https://blog.csdn.net/qq_45834768/article/details/113088260

版权

用AJAX和JSON以及数据库实现

需要导入Jackson的jar包以及mysql数据库,Druid连接池jar包

首先准备的HTML页面,用到了JQuery先导包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单注册页面</title>
    <!--用AJAX和JSON以及数据库实现用户名的检验是否存在案例-->
    <!--以及script用jQuery实现,所以要导包哦 -->
    <script src="js/jquery-3.3.1.js"></script>

</head>

<body>
<script>
    //在页面加载完成后  注意jQuery直接$入口函数即可
    window.onload=function(){
        //给username绑定失去焦点事件
        $("#username").blur(function(){
            //获取username文本输入框的值 this转为jQuery调用方法获取值
            var username = $(this).val();
            //发送ajax的请求   ,回调函数将来会传回一个data及下面function中
            //实际data应该是一个json对象
            //期望的data数据格式 {"userExsit":true,"msg":"重复了换一个"}, {"userExsit":false,"msg":"用户名可用"}
            $.get("FindUserServlet",{username:username},function (data) {
                //判断json中键userExsit是否是true

                var span = $("#s_username");
                if(data.userExist){
                    //用户名存在
                    span.css("color","red");
                    span.html(data.msg);
                }else{
                    //用户名不存在
                    span.css("color","green");
                    span.html(data.msg);
                }

            },"json");

        });
    };

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

注意:使用AJAX的$.get()方法时,需要在最后一个参数设置响应结果的类型为json

FindUserServlet代码

要注意设置响应消息的格式

package web.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import damain.User;
import org.apache.commons.beanutils.BeanUtils;
import service.UserService;
import service.impl.UserServiceImpl;

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 java.io.IOException;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet("/FindUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取用户名
        String username = request.getParameter("username");
        //调用service层判断username是否存在
        UserService service=new UserServiceImpl();
        User username1 = service.getUsername(username);
        //设置响应字符编码
        response.setContentType("text/html;charset=utf-8");
        Map<String,Object> map=new HashMap<>();
        if(username1!=null){
            //存在
            map.put("userExsit","true");
            map.put("msg","重复了换一个");
        }else{
            map.put("userExsit","flase");
            map.put("msg","用户名可用");
        }
        //将map转为json,并且写到页面上,传给客户端浏览器
        ObjectMapper mapper=new ObjectMapper();
        mapper.writeValue(response.getWriter(),map);

    }

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

dao层的实现类

直接查数据库有用户名就返回User对象,查不到就返回null

package dao.impl;

import damain.User;
import dao.UserDao;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import util.JDBCUtils;

import java.util.List;

public class UserDaoImpl implements UserDao {


    private JdbcTemplate template=new JdbcTemplate(JDBCUtils.getDataSource());


    @Override
    public  User getUsername(String username) {
        try {
            String sql="select * from manager where username=?";
            User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username);
            return  user;
        } catch (DataAccessException e) {
            e.printStackTrace();
            return null;
        }
    }
}

User类

package damain;

public class User {
    private String username;
    private String password;

    public String getUsername() {
        return username;
    }

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

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

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

数据库

在这里插入图片描述

结果展示
在这里插入图片描述

台南没有木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用户名的检验是否存在案例补充了数据库查询

用AJAX和JSON以及数据库实现需要导入Jackson的jar包以及mysql数据库,Druid连接池jar包**首先准备的HTML页面,用到了JQuery先导包<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简单注册页面</title> <!--用AJAX和JSON以及数据库实现用户名的检验是否存在案例-
复制链接

扫一扫