关于把AJAX加入到注册登录demo中去
2018年3月10日 19:21:23
第一次来SUBWAY真切地打代码. 这次的西红柿汤还是挺好喝的.
index.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>ajax测试</title> <script src="js/jquery-3.3.1.min.js"></script> <script> $(function () { $("#loginName").bind("blur", function () { var v_loginName = $(this).val() $.ajax({ type: "POST", //类型 url: "checkName", //传送地址 data: "loginName=" + v_loginName, //数据 dataType: "json", //数据类型 success: function (data) { //成功回调,当响应一切正常时. if (!data) { $("#message").text("对不起,此账号已使用"); $("#message").attr("color","red"); } else { $("#message").text("恭喜你,本账号可以使用"); $("#message").attr("color","green"); } }, error: function(){ //当程序出错错误时执行error的回调方法 $("#message").text("对不起,服务器内部错误!请稍候再试!"); $("#message").attr("color","red"); } }) }) }) </script> </head> <body> 账号: <input type="text" name="loginName" id="loginName"><span ><font id="message"></font></span> </body> </html>
CheckNameServlet:
package com.ykmimi.login; 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; WebServlet(name = "CheckNameServlet") public class CheckNameServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置请求编码 request.setCharacterEncoding("UTF-8"); //获取请求数据 String loginName = request.getParameter("loginName"); //简单判定 if ("admin".equals(loginName)) { request.setAttribute("data",false); request.getRequestDispatcher("data.jsp").forward(request,response); return; } request.setAttribute("data", true); request.getRequestDispatcher("data.jsp").forward(request, response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { super.doPost(request, response); } }
根据之上已经实现了Ajax的查询,并已经改为了从数据库直接查询:
package com.ykmimi.login; 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.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class CheckNameServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置请求编码 request.setCharacterEncoding("UTF-8"); // 获取请求数据 String userName = request.getParameter("userName"); // String driverName = "org.mariadb.jdbc.Driver"; String DBUrl = "jdbc:mariadb://**.**.**.**:3306/*****"; String DBUser = "******"; String DBPassword = "************"; PrintWriter pw = response.getWriter(); try { Class.forName(driverName); Connection conn = DriverManager.getConnection(DBUrl, DBUser, DBPassword); String sql = "SELECT * FROM user WHERE username = '" + userName + "'"; Statement stmt1 = conn.createStatement(); ResultSet name = stmt1.executeQuery(sql); if (name.next()) { request.setAttribute("data", false); request.getRequestDispatcher("data.jsp").forward(request, response); return; } request.setAttribute("data", true); request.getRequestDispatcher("data.jsp").forward(request, response); } catch (ClassNotFoundException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { super.doPost(request, response); } }
而界面是这样的,因为用户名下一个是js的onfocus方法,一个是刚加的jquery的blur方法,所以前者判定格式位数,后面从后台查询用户名是否注册,这里的问题是:
用户名格式不正确时, 但未注册. 这种情形
用户名格式正确, 但已经注册. 这种情形
两个方式不同的js显示红绿相间,着实不够逻辑和好看. 今晚睡觉想想办法吧. :)
2018年3月10日 22:41:56
