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 相关文章推荐
javascript 异常处理使用总结
Jun 21 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
js获取height和width的方法说明
Jan 06 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
javascript实现计算器功能
Mar 30 Javascript
javascript实现前端成语点击验证优化
Jun 24 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
如何设置mysql允许外网访问
2013/06/04 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
php四种定界符详解
2017/02/16 PHP
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
python实现巡检系统(solaris)示例
2014/04/02 Python
Python最长公共子串算法实例
2015/03/07 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python如何保存文本文件
2020/06/07 Python
Python 如何创建一个线程池
2020/07/28 Python
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
酒店前台接待岗位职责
2013/12/03 职场文书
2014年标准化工作总结
2014/12/17 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技