您当前的位置:首页 > 网站建设 > ajax
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

Ajax校验用户名是否存在的方法

51自学网 2022-02-21 10:50:47
  ajax

本文实例为大家分享了Ajax验证用户名是否存在的实例代码,代码简单易懂,非常不错,需要的朋友可以参考下

jsp页面

我引入了bootstrap和jQuery

<div class="form-group">     <label for="inputEmail3" class="col-sm-2 control-label"      style="color: #fff">姓名</label>     <div class="col-sm-10">      <input type="text" class="form-control" id="studentName"       name="studentName" placeholder="请输入姓名">        <span id="s_studentName"></span>     </div></div>

register.jsp页面

<script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><script> //页面加载完成之后 function fun() {  //给用户名绑定blur事件  $("#studentName").blur(function() {   //获取studentName文本框的值   var studentName = $("#studentName").val();   //发送ajax请求   //期望服务器响应回的数据格式{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}   //                          {"userExsit":false,"msg":"此用户名已存在"}   $.get("CheckNameServlet", {    "studentName" : studentName   }, function(data) {    //判断userExsit键的值是否为true    var span = $("#s_studentName");    if (data.isExist) {     //用户不存在     span.css("color", "red");     span.html(data.msg);    } else {     //用户存在,可以给提示,也可以不给     span.html("");    }   },"json");  }); }; fun();</script>

后台student文件下的CheckNameServlet页面

protected void doGet(HttpServletRequest request, HttpServletResponse response)   throws ServletException, IOException {   //设置编码格式  response.setContentType("text/html;charset=UTF-8");  //获取前端页面的值  String name = request.getParameter("studentName");  // 期望服务器响应回的数据格式{"isExsit":true,"msg":"此用户名太受欢迎,请更换一个"}  // {"userExsit":false,"msg":"此用户名已存在"}  // 检验是否存在该用户名  try {   boolean isExist = StudentService.isExist(name);   System.out.println("isExist" + isExist);   Map<String, Object> map = new HashMap<>();   // 通知页面,到底有没有   if (isExist) {    map.put("isExist", true);    map.put("msg", "此用户名太受欢迎,请更换一个");   } else {    map.put("isExist", false);    // map.put("msg", "用户名可用");   }   //将map转换为json之前,要导包哦~   // 将map转为json,并传递给客户端   ObjectMapper mapper = new ObjectMapper();   mapper.writeValue(response.getWriter(), map);  } catch (SQLException e1) {   // TODO Auto-generated catch block   e1.printStackTrace();  } }

JDBCDemo的方法的实现(我没实现接口,直接写的)

public static boolean checkName(String name) throws SQLException {  boolean flag = false;  String sql = "select * from student_table where student_name=?";  PreparedStatement statement = connection.prepareStatement(sql);  statement.setString(1, name);  ResultSet set = statement.executeQuery();   如果存在我输入的用户名和数据库表中已有的用户名相同时  if(set.next()) {   flag = true;  }  return flag; }}

总结:

以上所述是小编给大家介绍的Ajax验证用户名是否存在的实例代码,希望对大家有所帮助。


下载地址:
Ajax实现三级联动效果
ajax接口文档url路径的简写实例
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。