jQuery基于ajax方式实现用户名存在性检查功能示例


Posted in Javascript onFebruary 10, 2017

本文实例讲述了jQuery基于ajax方式实现用户名存在性检查功能。分享给大家供大家参考,具体如下:

对于拥有会员功能的网站,尤其是会员登录后可以留言或评论的网站,一般要求不能有两个或两个以上相同的用户名存在。因此,在用户注册的时就需要对用户名是否已经被注册进行检查防止出现相同的用户名。下面是我实现这种功能的一种解决方案。

1、方案原理:利用ajax的异步请求不刷新正在注册的页面向后端发送请求,后端对请求数据进行处理返回用户名是否已经存在的结果。

2、方案详情

(1)html代码部分,运用了input标签的onblur事件调用相应的js函数。

<div class="pull-left">
  <input id="username" name="username" type="text" class="form-control isUsername" onblur = "CheckUserName()">
</div>

(2)Jquery部分,采用了ajax技术

function CheckUserName()
{
  var userName = $("#username").val();
  var Option =
  {
    url: encodeURI('/Handler/AuthAccounts.ashx?action=checkusername&userName='+userName),
    type: "get",
    dataType: 'text',
    cache: false, //设置为 false 将不会从浏览器缓存中加载请求信息。
    async: true, //(默认: true),所有请求均为异步请求。发送同步请求,请将此选项设置为 false。同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
    timeout: 150000, //设置请求超时时间(毫秒)。此设置将覆盖全局设置。
    error: function ()
    {
    },
    success: function (data, textStatus)
    {
      if (data == null || data == undefined)
      {
        return false;
      }
      jsondata = eval('(' + data + ')');
      if (jsondata.state == "success")
      {
        alert(jsondata.message);
        return false;
      }
    },
    beforeSend: function () //检查之前,是否通过格式验证
    {
      var text = $("#username-error").text();
      if (text != ""&&text!=undefined&&text!=null)
      {
        return false;
      }
    }
  };
  jQuery.ajax(Option);
  return false;
}

(3)后端一般应用处理程序

/// <summary>
/// 检查用户名是否已经存在
/// </summary>
/// <param name="context"></param>
protected void CheckUserName(string userName)
{
   CommonStruct commonStruct = new CommonStruct();
   if (userName != "" && userName!=string.Empty)
   {
     QingCi.Model.ExecResultData result = QingCi.BLL.AuthAccounts.CheckUserNameExist(userName);
     if (result.State == stateSuccess)
     {
       commonStruct.state = stateSuccess;
       commonStruct.message = result.Message;
      HttpContext.Current.Response.Write(serializer.Serialize(commonStruct));
      HttpContext.Current.Response.End();
     }
   }
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
正则表达式语法
Oct 09 Javascript
jQuery中extend函数详解
Feb 13 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
JS ES6异步解决方案
Apr 29 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 #Javascript
javascript自执行函数
Feb 10 #Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 #Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 #Javascript
JS验证不重复验证码
Feb 10 #Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 #Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 #Javascript
You might like
基于jquery的超简单上下翻
2010/04/20 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
教你用Python写安卓游戏外挂
2018/01/11 Python
Django开发中复选框用法示例
2018/03/20 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
Python远程方法调用实现过程解析
2020/07/28 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
竞聘副主任科员演讲稿
2014/01/11 职场文书
家长对孩子评语
2014/01/30 职场文书
会计岗位职责模板
2014/03/12 职场文书
2014年教师工作总结
2014/11/10 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记