基于jQuery实现的Ajax 验证用户名是否存在的实现代码


Posted in Javascript onApril 06, 2011

实例:
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)初始化界面

基于jQuery实现的Ajax 验证用户名是否存在的实现代码

(2)正在查询提示页面

基于jQuery实现的Ajax 验证用户名是否存在的实现代码

(3) 验证用户名已经存在页面

基于jQuery实现的Ajax 验证用户名是否存在的实现代码

(4)  验证用户名未存在页面

基于jQuery实现的Ajax 验证用户名是否存在的实现代码

至此 AJAX验证用户名是否存在的功能已经完成。

Javascript 相关文章推荐
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 #Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 #Javascript
jQuery中绑定事件的命名空间详解
Apr 05 #Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 #Javascript
Jquery判断IE6等浏览器的代码
Apr 05 #Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 #Javascript
JQuery中$之选择器用法介绍
Apr 05 #Javascript
You might like
php addslashes 函数详细分析说明
2009/06/23 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
angular2使用简单介绍
2016/03/01 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
python对常见数据类型的遍历解析
2019/08/27 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
一道Delphi上机题
2012/06/04 面试题
报表员工作失误检讨书范文
2014/09/19 职场文书
新闻人物通讯稿
2014/10/09 职场文书
民事辩护词范文
2015/05/21 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
小学运动会加油稿
2015/07/22 职场文书
MySQL触发器的使用
2021/05/24 MySQL
JavaScript实现登录窗体
2021/06/22 Javascript