基于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(跨)iframe操作DOM的示例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
今天在做一个项目功能时需要显示checkbox选项来让用户进行选择，由于前端不是很熟练，所以做了一个简单的Demo，其中遇到一些小问题，特记录下来，希望能帮到遇到类似问题的同学们2013-11-11
下面小编就为大家分享一篇jquery在启动页面时,自动加载数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
只需引入jqery.js,不需要引入插件，利用jquery定义的一些基本方法，就能实现诸如隐藏，显示，淡入，淡出，半透明等2010-12-12![jQuery的选择器中的通配符[id^=''code'']或[name^=''code'']及jquery选择器总结](//img.jbzj.com/images/xgimg/bcimg4.png)
jQuery的选择器中的通配符[id^=''code'']或[name^=''code'']及jquery选择器总结
这篇文章主要介绍了jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了jquery实现超简洁的TAB选项卡效果代码,涉及jquery通过鼠标click事件结合链式操作动态操作tab选项卡的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
jquery checkbox,radio是否选中的判断代码
jquery checkbox,radio是否选中的判断代码,需要的朋友可以参考下。2010-03-03
这篇文章主要给大家介绍了利用jquery如何禁止外层滚动条的滚动,文中给出了详细的示例代码，相信对大家的理解和学习具有一定的参考借鉴价值，有需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
本文带你了解了一遍 jQuery 3 将会带来的一些重大变化。或许你已经注意到了，这个版本是可能对你现有的项目产生太大的影响，因为没有引入太多许多重大更改。2016-06-06
这篇文章主要介绍了jQuery通过写入cookie实现更换网页背景的方法,涉及jQuery结合cookie设置页面元素属性的相关操作技巧,需要的朋友可以参考下2016-04-04
![jQuery的选择器中的通配符[id^=''code'']或[name^=''code'']及jquery选择器总结](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论