脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery实现Ajax验证用户名是否可用

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

 更新时间：2018年03月25日 12:02:21   作者：a772304419  
这篇文章主要为大家详细介绍了基于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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • instanceof和typeof运算符的区别详解

    instanceof和typeof运算符的区别详解

    两个运算符虽然比较相似，其实区别还是非常大的，虽然不难区别，但是对于初学者可能稍有困扰，下面就简单介绍一下它们两者的区别，希望对需要的朋友有所帮助
    2014-01-01
  • Tinymce+jQuery.Validation使用产生的BUG

    Tinymce+jQuery.Validation使用产生的BUG

    在IE6下，当页面有advanced模式的Tinymce编辑器，并且，并且jquery.validation使用了jquery.metadata时会出现以下问题
    2010-03-03
  • JQuery Ajax如何实现注册检测用户名

    JQuery Ajax如何实现注册检测用户名

    这篇文章主要介绍了JQuery Ajax如何实现注册检测用户名,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • jquery实现的让超出显示范围外的导航自动固定屏幕最顶上

    jquery实现的让超出显示范围外的导航自动固定屏幕最顶上

    经常会遇到这样的情况，当页面展示内容过长时，想点导航切换栏目，就得把滚动条拉回到顶上，这样操作总不太人性化，能不能让导航超出显示范围外时自动贴在屏幕最顶上呢？答案肯定是能的。如果不太明白，把滚动条拉到下面点，看下我博客是效果就明白了。
    2011-09-09
  • 移动端 一个简单易懂的弹出框

    移动端 一个简单易懂的弹出框

    本文给大家分享一段简单的jquery代码实现一个简单易懂的弹出框，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-07-07
  • 基于jquery的图片轮播 tab切换组件

    基于jquery的图片轮播 tab切换组件

    最近在做手机上的web app，很多场景需要使用到类似tab切换和图片轮播的东西，需要支持手势和鼠标点击的，于是就基于jquery弄了一个，每一个参数有详细的说明
    2012-07-07
  • jQuery之简单的表单验证实例

    jQuery之简单的表单验证实例

    下面小编就为大家带来一篇jQuery之简单的表单验证实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 使用jQuery操作DOM的方法小结

    使用jQuery操作DOM的方法小结

    本文主要介绍了使用jQuery操作DOM的方法，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • JQuery里选择超链接的实现代码

    JQuery里选择超链接的实现代码

    在一个客户的case中遇到需要在SharePoint Calendar试图里面根据一定的规则来显示或者隐藏记录，为了取得记录的handle，可以通过超链接选择器来查找
    2011-05-05
  • jquery操作复选框(checkbox)的12个小技巧总结

    jquery操作复选框(checkbox)的12个小技巧总结

    本篇文章主要是对jquery操作复选框(checkbox)的12个小技巧进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02

最新评论