基于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 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
在JavaScript中如何使用宏详解
May 06 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
php实现高效获取图片尺寸的方法
2014/12/12 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
JS backgroundImage控制
2009/05/19 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
ES6新增的math,Number方法
2017/08/06 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
给我一面国旗 python帮你实现
2019/09/30 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
委托书的格式
2014/08/01 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
小学语文国培研修日志
2015/11/13 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python