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 相关文章推荐
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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 getsiteurl()函数
2009/09/05 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python操作MongoDB基础知识
2013/11/01 Python
Python写的服务监控程序实例
2015/01/31 Python
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
办公室文员自荐书
2014/02/03 职场文书
优良学风班申请材料
2014/02/13 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
工地宣传标语
2014/06/18 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
英文产品推荐信
2015/03/27 职场文书
公司备用金管理制度
2015/08/04 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python