【JavaWeb】AJAX和JSON案例：用户名已注册 |
您所在的位置：网站首页 › ajax注册验证信息 › 【JavaWeb】AJAX和JSON案例：用户名已注册 |
【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层Servlet 4.遇到的问题解决方案 5.测试 1.案例需求校验输入的用户名是否存在。我们每次注册一个游戏ID名称时，系统都会自动检测该名称是否已经存在: 如果存在则提示用户已经存在，请更换；如果不存在，则可以注册成功。涉及的技术点：JQuery+Ajax+Json+Jackson+JdbcTemplate+Druid+Tomcat+MySQL 2.案例分析
客户端请求，当输入框失去焦点的时候，会发送一个请求到服务器进行查询，请求参数里包含用户输入的用户名数据。
知道了发什么请求，和响应什么数据，我们可以简单来实现一下用户名校验功能。 1.客户端我们发送一个Ajax请求，请求参数包含username2.服务端接收请求，我们期望响应回的数据格式： 用户名存在情况： {"userExsit":true,"msg":"此用户名太受欢迎，请更换一个"}用户名不存在情况：{"userExsit":false,"msg":"用户名可用"} 3.代码实现 3.1 数据库准备user表
案例使用的资源，提取码：vt8c 3.3 工程结构目录
register.html 用户注册 //在页面加载完成后 $(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"); }) }) 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.class), username); return user; }catch (Exception e){ e.printStackTrace(); return null; } } } 3.7 service层UserService.java /** * 业务成接口 */ public interface UserService { /** * 查询用户名方法 * @return * @param username */ Map findUserName(String username); }UserServiceImpl.java /** * 业务层实现类 */ public class UserServiceImpl implements UserService { //创建dao层引用 UserDao dao = new UserDaoImpl(); /** * 查询用户名方法 * @return * @param username */ @Override public Map findUserName(String username) { //调用dao中方法 User user = dao.findUser(username); System.out.println(user); //创建一个Map对象 Map 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=3000JDBCUtils.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层ServletFindUserServlet.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 map = service.findUserName(username); //3.最终需要将map转为json，并且传递给客户端浏览器 ObjectMapper objectMapper = new ObjectMapper(); //将map转为json，传递给客户端浏览器 objectMapper.writeValue(response.getWriter(),map); } } 4.遇到的问题上述代码已经进行了修改，下面是未优化前遇到的问题：
2.第二处和第三处问题，是因为程序逻辑错误导致，这是使用JSON传输数据非常常见的问题。前端JS中需要的数据是JSON数据格式的对象，而服务端响应的数据却是字符串文本数据，导致数据无法使用，引起错误。 浏览器控制台打印的服务端响应的字符串数据：
此处打印的应该是{“msg”:"???",“userExsit”:false}，已修正。 正确数据应是JSON数据格式的对象：如下
用户名可用情况:
以上就是AJAX和JSON小案例练习，对理解AJAX和JSON非常有帮助。 推荐阅读： 【JavaWeb】Ajax通信. 【JavaWeb】JSON详解：打包JSON数据？. 【JavaWeb】AJAX和JSON案例：用户名已注册. 欢迎点赞评论，指出不足，笔者由衷感谢哦！~ |
F12打开浏览器控制台，进行网络抓包，查看客户端请求和服务端响应消息：
再看服务端的响应消息如下，是一个json格式的对象数据
可从网上下载，这里提供案例使用的Jar包资源和JQuery.js：
1.第一处问题是：乱码问题，客户端和服务端编码不一致引起，在服务端FindUserServlet加入设置编码格式的代码，如下：
用户名不可用情况:
【本文地址】