基于jQuery实现的Ajax 验证用户名是否存在的实现代码
更新时间：2011年04月06日 22:34:36 作者：
基于jQuery实现的Ajax 验证用户名是否存在的实现代码，需要的朋友可以参考下。
实例：
1、请求页面AJax.aspx
HTML代码
<div>
<input id="txtName" type="text" /><input type="button" value="查看用户名是否存在" id="btn" onclick="JudgeUserName();" />
<div id="showResult" style="float:left">div>
div>
JS代码
<script type="text/javascript" src="CSS/jquery-1.3.2.js"></script>
<script type="text/javascript">
function JudgeUserName()
{
$.ajax({
type:"GET",
url:"AjaxUserInfoModify.aspx",
dataType:"html",
data:"userName="+$("#txtName").val(),
beforeSend:function(XMLHttpRequest)
{
$("#showResult").text("正在查询");
//Pause(this,100000);
},
success:function(msg)
{
$("#showResult").html(msg);
$("#showResult").css("color","red");
},
complete:function(XMLHttpRequest,textStatus)
{
//隐藏正在查询图片
},
error:function()
{
//错误处理
}
});
}
</script>
2 、页面AjaxUserInfoModify.aspx
后台代码
protected void Page_Load(object sender, EventArgs e)
{
string userName = Request.QueryString["userName"].ToString ();
if (userName == "James Hao")
{
Response.Write ("用户名已经存在！");
}
else
{
Response.Write ("您可以使用此用户名！");
}
}
1、请求页面AJax.aspx
HTML代码
复制代码 代码如下:
<div>
<input id="txtName" type="text" /><input type="button" value="查看用户名是否存在" id="btn" onclick="JudgeUserName();" />
<div id="showResult" style="float:left">div>
div>
JS代码
复制代码 代码如下:
<script type="text/javascript" src="CSS/jquery-1.3.2.js"></script>
<script type="text/javascript">
function JudgeUserName()
{
$.ajax({
type:"GET",
url:"AjaxUserInfoModify.aspx",
dataType:"html",
data:"userName="+$("#txtName").val(),
beforeSend:function(XMLHttpRequest)
{
$("#showResult").text("正在查询");
//Pause(this,100000);
},
success:function(msg)
{
$("#showResult").html(msg);
$("#showResult").css("color","red");
},
complete:function(XMLHttpRequest,textStatus)
{
//隐藏正在查询图片
},
error:function()
{
//错误处理
}
});
}
</script>
2 、页面AjaxUserInfoModify.aspx
后台代码
复制代码 代码如下:
protected void Page_Load(object sender, EventArgs e)
{
string userName = Request.QueryString["userName"].ToString ();
if (userName == "James Hao")
{
Response.Write ("用户名已经存在！");
}
else
{
Response.Write ("您可以使用此用户名！");
}
}
3 、运行界面
(1)初始化界面
（2）正在查询提示页面
（3） 验证用户名已经存在页面
（4） 验证用户名未存在页面
至此 AJAX验证用户名是否存在的功能已经完成。
相关文章
(jQuery,mootools,dojo)使用适合自己的编程别名命名
我们经常用一些别名方法来使用自己喜欢的js 库。学习javascript的朋友可以参考下。2010-09-09
这篇文章主要介绍了jQuery如何获取/设置/删除DOM元素的属性,需要的朋友可以参考下2014-05-05
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
这篇文章主要介绍了非常实用的jQuery代码段集锦,总结分析了包括jQuery检测浏览器、滚动、复制、粘贴、淡入淡出等操作实现技巧,需要的朋友可以参考下2019-08-08
本身不熟悉js略懂JQuery，闲着没事帮朋友公司一个程序小伙修改了个消息提示框，把修改后的代码和代价分享一下2011-07-07
jQuery中text() val()和html()的区别实例详解
这篇文章主要介绍了jQuery中text() val()和html()的区别实例详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
下面小编就为大家带来一篇Mui使用jquery并且使用点击跳转新窗口的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了JQuery获得内容和属性方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
jQuery zoom是一款能够查看相册大图的jQuery弹出层插件，点击相册的缩略图，就会弹出该相片对应的大图，并且带有个性的加载动画，还有上一张下一张按钮以及关闭按钮。使用方法非常简单。兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等浏览器。2015-04-04
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
这篇文章主要介绍了jQuery实现输入框邮箱内容自动补全与上下翻动显示效果,涉及jquery.autoComplete.js插件的使用,可实现输入框内容自动补全的功能,附带了完整的demo源码供读者下载参考,需要的朋友可以参考下2016-09-09
在浏览一些网站，尤其是一些小说网站的时候，都会有修改页面背景颜色的地方，这个是用jquery可以做到2014-06-06
最新评论