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 相关文章推荐
js比较和逻辑运算符的介绍
Mar 10 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 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
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
深入php内核之php in array
2015/11/10 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
详解Python中expandtabs()方法的使用
2015/05/18 Python
深入理解Python中的*重复运算符
2017/10/28 Python
python3中的md5加密实例
2018/05/29 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
python实现FTP循环上传文件
2020/03/20 Python
解决Django no such table: django_session的问题
2020/04/07 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
《锄禾》教学反思
2014/04/08 职场文书
导游个人求职信
2014/04/25 职场文书
小学班级特色活动方案
2014/08/31 职场文书
2015年科室工作总结
2015/04/10 职场文书
交通事故被告答辩状
2015/05/22 职场文书
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang