jQuery基于ajax方式实现用户名存在性检查功能示例
2017-02-18 10:49:29
jQuery
这篇文章主要介绍了jQuery基于ajax方式实现用户名存在性检查功能,结合实例形式分析了jQuery前台ajax交互及后台C#验证操作的相关实现技巧,需要的朋友可以参考下
（2）Jquery部分，采用了ajax技术
（3）后端一般应用处理程序
希望本文所述对大家jQuery程序设计有所帮助。
本文实例讲述了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> |
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;
}
|
/// <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();
}
}
}
|
