【JavaWeb】AJAX和JSON案例：用户名已注册

最新推荐文章于 2021-08-05 15:19:34 发布

dongab

最新推荐文章于 2021-08-05 15:19:34 发布

阅读量722

点赞数 3

分类专栏： JavaWeb开发文章标签： ajax json java

本文链接：https://blog.csdn.net/mdong9/article/details/108686855

版权

JavaWeb开发专栏收录该内容

21 篇文章 10 订阅

订阅专栏

学习了AJAX和JSON，完成一个案例加深理解。

本文目录

1.案例需求

校验输入的用户名是否存在。我们每次注册一个游戏ID名称时，系统都会自动检测该名称是否已经存在:

如果存在则提示用户已经存在，请更换；
如果不存在，则可以注册成功。

涉及的技术点：JQuery+Ajax+Json+Jackson+JdbcTemplate+Druid+Tomcat+MySQL

2.案例分析

在这里插入图片描述
F12打开浏览器控制台，进行网络抓包，查看客户端请求和服务端响应消息：

客户端请求，当输入框失去焦点的时候，会发送一个请求到服务器进行查询，请求参数里包含用户输入的用户名数据。

在这里插入图片描述
再看服务端的响应消息如下，是一个json格式的对象数据

bd__cbs__70vpnz({"errInfo":{ "no": "0"},    "data": {"userExsit": "1","userType": "1", "suggNames": [ "董小帅04" ,"董小帅白羊"  , "sunny董小帅" ] }, "traceid": ""})

知道了发什么请求，和响应什么数据，我们可以简单来实现一下用户名校验功能。

1.客户端我们发送一个Ajax请求，请求参数包含username
2.服务端接收请求，我们期望响应回的数据格式：
- 用户名存在情况： {"userExsit":true,"msg":"此用户名太受欢迎，请更换一个"}
- 用户名不存在情况：{"userExsit":false,"msg":"用户名可用"}

3.代码实现

3.1 数据库准备

user表
在这里插入图片描述

3.2 创建JavaWeb项目工程，导入需要的Jar包

在这里插入图片描述
可从网上下载，这里提供案例使用的Jar包资源和JQuery.js：

案例使用的资源，提取码：vt8c

3.3 工程结构目录

在这里插入图片描述

3.4 前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--引入JQuery-->
    <script src="js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        //在页面加载完成后
        $(function () {
            //给username绑定blur事件,失去焦点事件
            $(".username").blur(function () {
                //获取username文本输入框的值
                var username = $(this).val();
                //发送ajax请求
                $.get("FindUserServlet",{"username":username},function (data) {
                    //打印data
                    console.log(data);

                    var span = $(".msg");
                    //判断userExsit键的值是否是true
                    if (data.userExsit){
                        //用户名存在
                        span.css({"color":"red"});
                        span.html(data.msg);
                    }else {
                        //用户名不存在
                        span.css({"color":"green"});
                        span.html(data.msg);
                    }
                },"json");
            })
        })

    </script>

</head>
<body>

    <form>
        <input type="text" name="username" class="username" placeholder="请输入用户名">
        <span class="msg"></span><br>
        <input type="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="注册"><br>
    </form>

</body>
</html>

3.5 domain层

User.java

/**
 * 用户bean
 */
public class User implements Serializable {
    private int id;
    private String username;
    private String password;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    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{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

3.6 dao层

UserDao.java

/**
 * 持久层接口
 */
public interface UserDao {

    /**
     * 根据用户名，查询用户方法
     * @param username
     * @return 返回一个User对象
     */
    User findUser(String username);
}

UserDaoImpl.java

/**
 * 持久层实现类
 */
public class UserDaoImpl implements UserDao {

    //创建JdbcTemplate对象
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    /**
     * 根据用户名，查询用户方法
     * @param username
     * @return
     */
    @Override
    public User findUser(String username) {
        try{
            //定义sql
            String sql = "select * from user where username = ?";
            //调用JdbcTemplate对象方法，执行sql
            User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username);
            return user;
        }catch (Exception e){
            e.printStackTrace();
            return null;
        }
    }
}

3.7 service层

UserService.java

/**
 * 业务成接口
 */
public interface UserService {

    /**
     * 查询用户名方法
     * @return
     * @param username
     */
    Map<String, Object> findUserName(String username);
}

UserServiceImpl.java

/**
 * 业务层实现类
 */
public class UserServiceImpl implements UserService {

    //创建dao层引用
    UserDao dao = new UserDaoImpl();

    /**
     * 查询用户名方法
     * @return
     * @param username
     */
    @Override
    public Map<String, Object> findUserName(String username) {
        //调用dao中方法
        User user = dao.findUser(username);
        System.out.println(user);
        //创建一个Map对象
        Map<String, Object> map = new HashMap<>();
        if (username.equals(user.getUsername())){
            //存在
            map.put("userExsit",true);
            map.put("msg","此用户名太受欢迎，请更换一个");
        }else {
            //不存在
            map.put("userExsit",false);
            map.put("msg","用户名可用");
        }
        return map;
    }
}

3.8 util层

Druid连接池配置文件：druid.properties

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/example?useSSL=false&characterEncoding=UTF-8
username=root
password=201703457
initialSize=5
maxActive=10
maxWait=3000

JDBCUtils.java

/**
 * JDBC工具类，使用Druid连接池
 */
public class JDBCUtils {

    private static DataSource ds;

    static {
        try {
            //1.加载配置文件
            Properties prop = new Properties();
            InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
            prop.load(is);

            //2.初始化数据库连接池对象
            ds = DruidDataSourceFactory.createDataSource(prop);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 获取连接池对象
     *
     * @return
     */
    public static DataSource getDataSource() {
        return ds;
    }

    /**
     * 获取数据库连接对象
     *
     * @return
     */
    public static Connection getConnection() throws SQLException {
        return ds.getConnection();
    }
}

3.9 web层Servlet

FindUserServlet.java

@WebServlet(name = "FindUserServlet", urlPatterns = "/FindUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //0.设置解码格式
        request.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");

        //1.获取用户名
        String username = request.getParameter("username");

        //2.调用service层方法判断用户名是否存在,service->dao->访问数据库
        UserService service = new UserServiceImpl();
        Map<String, Object> map = service.findUserName(username);

        //3.最终需要将map转为json，并且传递给客户端浏览器
        ObjectMapper objectMapper = new ObjectMapper();
        //将map转为json，传递给客户端浏览器
        objectMapper.writeValue(response.getWriter(),map);
    }
}

4.遇到的问题

上述代码已经进行了修改，下面是未优化前遇到的问题：

在这里插入图片描述
1.第一处问题是：乱码问题，客户端和服务端编码不一致引起，在服务端FindUserServlet加入设置编码格式的代码，如下：

//0.设置解码格式
request.setCharacterEncoding("utf-8");
//设置响应编码格式
response.setContentType("application/json;charset=utf-8");

2.第二处和第三处问题，是因为程序逻辑错误导致，这是使用JSON传输数据非常常见的问题。前端JS中需要的数据是JSON数据格式的对象，而服务端响应的数据却是字符串文本数据，导致数据无法使用，引起错误。

浏览器控制台打印的服务端响应的字符串数据：

在这里插入图片描述

此处打印的应该是{“msg”:"???",“userExsit”:false}，已修正。

正确数据应是JSON数据格式的对象：如下

在这里插入图片描述

解决方案

服务器响应的数据，在浏览器客户端使用时，要想当作json数据格式使用。有两种解决方案：
1. $.get(type):将最后一个参数type指定为"json",即接受的数据MIME类型是json
2. 在服务器端设置响应消息为MIME类型：response.setContentType("application/json;charset=utf-8");

5.测试

用户名可用情况:

在这里插入图片描述
用户名不可用情况:

在这里插入图片描述

以上就是AJAX和JSON小案例练习，对理解AJAX和JSON非常有帮助。

欢迎点赞评论，指出不足，笔者由衷感谢哦！~

dongab

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【JavaWeb】AJAX和JSON案例：用户名已注册

学习了AJAX和JSON，完成一个案例加深理解。本文目录1.案例需求2.案例分析3.代码实现3.1 数据库准备3.2 创建JavaWeb项目工程，导入需要的Jar包3.3 工程结构目录3.4 前端页面3.5 domain层3.6 dao层3.7 service层3.8 util层3.9 web层Servlet4.遇到的问题解决方案5.测试1.案例需求校验输入的用户名是否存在。我们每次注册一个游戏ID名称时，系统都会自动检测该名称是否已经存在:如果存在则提示用户已经存在，请更换；如果不存在，则
复制链接

扫一扫

专栏目录