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


Posted in jQuery onMarch 25, 2018

本文实例为大家分享了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 相关文章推荐
如何编写jquery插件
Mar 29 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 #jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 #jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 #jQuery
jquery的 filter()方法使用教程
Mar 22 #jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 #jQuery
jQuery替换节点元素的操作方法
Mar 18 #jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 #jQuery
You might like
php在线打包程序源码
2008/07/27 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
php实现微信扫码支付
2017/03/26 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
lib.utf.js
2007/08/21 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
VSCode下好用的Python插件及配置
2018/04/06 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
职务说明书范文
2014/05/07 职场文书
环保倡议书格式范文
2014/05/14 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
大学生操行评语大全
2014/12/31 职场文书
离婚起诉书怎么写
2015/05/19 职场文书