基于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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 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
for循环连续求和、九九乘法表代码
2012/02/20 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python程序语言快速上手教程
2012/07/18 Python
Python Series从0开始索引的方法
2018/11/06 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python实现学员管理系统
2019/02/26 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
银行办公室岗位职责
2014/03/10 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
经济管理专业求职信
2014/06/09 职场文书
教师求职自荐书
2014/06/14 职场文书
员工趣味活动方案
2014/08/27 职场文书
大一新生检讨书
2014/10/29 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
六五普法心得体会2016
2016/01/21 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
Python 语言实现六大查找算法
2021/06/30 Python