基于jQuery实现Ajax验证用户名是否存在实例


Posted in Javascript onMarch 30, 2016

本文章向大家分享基于jQuery实现的Ajax 验证用户名是否存在的实现代码,需要的码农朋友可以参考一下本文的源代码。

jQuery.ajax概述

HTTP 请求加载远程数据。

通过jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。

$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。
注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。

注意:如果dataType设置为"script",那么在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。

参数列表:

基于jQuery实现Ajax验证用户名是否存在实例

基于jQuery实现Ajax验证用户名是否存在实例

基于jQuery实现Ajax验证用户名是否存在实例

这里有几个Ajax事件参数:beforeSend ,success ,complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
请认真阅读上面的参数列表,如果你要用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 ("您可以使用此用户名!"); 
} 
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
Vue实现背景更换颜色操作
Jul 17 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
jQuery表格插件datatables用法汇总
Mar 29 #Javascript
基于javascript实现tab切换特效
Mar 29 #Javascript
基于javascript实现简单的抽奖系统
Apr 15 #Javascript
基于javascript实现九宫格大转盘效果
May 28 #Javascript
全屏js头像上传插件源码高清版
Mar 29 #Javascript
js闭包引起的事件注册问题介绍
Mar 29 #Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 #Javascript
You might like
PHP游戏编程25个脚本代码
2011/02/08 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
Python中decorator使用实例
2015/04/14 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
python实现多线程网页下载器
2018/04/15 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
深入了解Python enumerate和zip
2020/07/16 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
普通党员个人整改措施
2014/10/27 职场文书
学生会任命书范本
2015/09/21 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS