当前位置: 首页 > 编程笔记 >

基于jQuery实现Ajax验证用户名是否可用实例

太叔英锐
2023-03-14
本文向大家介绍基于jQuery实现Ajax验证用户名是否可用实例,包括了基于jQuery实现Ajax验证用户名是否可用实例的使用技巧和注意事项,需要的朋友参考一下

本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码,供大家参考,具体内容如下

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jquery_ajax/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
 //页面加载完成后
 $(function() {
  //添加失焦事件
  $("#username").blur(function() {
   //获取录入的用户名
   var usernamevalue = $("#username").val();
   //向服务器发送请求
   var url="/jquery_ajax/load";
   $("#username_span").load(url,{'username':usernamevalue});
  });

 });
</script>
</head>
<body>

 <input type="text" name="username" id="username"><span id="username_span"></span>
 <br>
 <input type="password" name="password">
 <br>

</body>
</html>

LoginServlet

public class LoadServlet extends HttpServlet {

 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // 解决乱码
  request.setCharacterEncoding("utf-8");
  response.setCharacterEncoding("utf-8");
  // 1.得到用户名
  String username = request.getParameter("username");

  // 2.判断用户名是否可以使用
  if ("tom".equals(username)) {
   // 用户名不可以使用
   response.getWriter().write("<font color='red'>用户名被占用</font>");
  } else {
   // 用户名可以使用

   response.getWriter().write("<font color='green'>用户名可以使用</font>");
  }
 }

 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

  doGet(request, response);
 }

}

web.xml

<servlet>
 <description></description>
 <display-name>LoadServlet</display-name>
 <servlet-name>LoadServlet</servlet-name>
 <!-- 
  Class clazz = Class.forName("com.zxl.servlet.LoadServlet");
  Object obj = clazz.newInstatnce();
  // 反射去调用 doGet, doPost
  -->
 <servlet-class>com.zxl.servlet.LoadServlet</servlet-class>
 </servlet>
 <servlet-mapping>
 <servlet-name>LoadServlet</servlet-name>
 <url-pattern>/load</url-pattern>
 </servlet-mapping>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍基于jQuery实现Ajax验证用户名是否存在实例,包括了基于jQuery实现Ajax验证用户名是否存在实例的使用技巧和注意事项,需要的朋友参考一下 本文章向大家分享基于jQuery实现的Ajax 验证用户名是否存在的实现代码,需要的码农朋友可以参考一下本文的源代码。 jQuery.ajax概述 HTTP 请求加载远程数据。 通过jQuery 底层 AJAX 实现。简单易用的高层实现

  • 本文向大家介绍使用struts2+Ajax+jquery验证用户名是否已被注册,包括了使用struts2+Ajax+jquery验证用户名是否已被注册的使用技巧和注意事项,需要的朋友参考一下 推荐阅读:JQuery+Ajax+Struts2+Hibernate框架整合实现完整的登录注册 在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题

  • 本文向大家介绍JQuery用户名校验的具体实现,包括了JQuery用户名校验的具体实现的使用技巧和注意事项,需要的朋友参考一下 本实例为大家分享了JQuery用户名校验功能,分享给大家供大家参考,具体内容如下 $(document).ready(function(){}):定义页面装载完成时,需要执行的方法。 $()获得页面指定的节点,参数是某种CSS的选择器。返回的是一个JQuery对象,可在其

  • 本文向大家介绍php验证用户名是否以字母开头与验证密码实例,包括了php验证用户名是否以字母开头与验证密码实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了php验证用户名是否以字母开头与验证密码的方法。分享给大家供大家参考。具体如下: 验证用户名是否以字母开头与验证密码只能为数字和字母的组合代码,三种常用验证函数:验证邮箱地址格式 ,验证密码只能为数字和字母的组合以及验证用户名是否以字

  • jQuery 是一个小型的 JavaScript 库,它通常被用来简化 DOM 和 JavaScript 操作。通过在服务器和客户端之间交换 JSON 数据是使得 Web 应用动态化的完美方式。 JSON 本身是一个很清量级的数据传输格式,非常近似于 Python 的原始数据类型 (数字、字符串、字典和链表等),这一数据格式被广泛支持,而且非常容易解析。 它几年前开始流行,然后迅速取代了 XML

  • 本文向大家介绍layui的表单验证支持ajax判断用户名是否重复的实例,包括了layui的表单验证支持ajax判断用户名是否重复的实例的使用技巧和注意事项,需要的朋友参考一下 如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持。onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证。 html: js: 后台的方