用ajax进行部门的验证,ajax用$.post方式进行用户名校验
这次给大家带来ajax用$.post方式进行用户名校验,ajax用$.post方式进行用户名校验的注意事项有哪些,下面就是实战案例,一起来看一下。
第一种:传统的ajax异步请求,后台代码以及效果在最下边
首先我们在eclipse中创建一个注册页面regist.jsp,创建一个form表单,注意,由于我们只是实现用户名校验的效果,下边红色部门是我们需要研究对象,所以其他的部门可以忽略不看。
内容如下:
pageEncoding="UTF-8"%>
用户注册
//第三步:ajax异步请求用户名是否存在
function checkUsername(){
// 获得文本框值:
var username = document.getElementById("username").value;
// 1.创建异步交互对象
var xhr = createXmlHttp();//第二步中已经创建xmlHttpRequest,这里直接调用函数就可以了。
// 2.设置监听
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//把返回的数据放入到span中
document.getElementById("span").innerHTML = xhr.responseText;//responseText是后台返回的数据
}
}
}
// 3.打开连接
xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);
// 4.发送
xhr.send(null);
}
//第二部:创建xmlHttp对象
function createXmlHttp(){
var xmlHttpRequest;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttpRequest;
}
function change(){
var img1 = document.getElementById("checkImg");
img1.src="${pageContext.request.contextPath}/checkImg.action?"+new Date().getTime();
}
会员注册
小米商城
//第一步:首先,我们创建一个用户名input输入框,并添加一个οnblur="checkUsername()"事件
用 户 名:
密 码:
确认 密码:
邮 箱 号:
姓 名:
手 机 号:
地 址:
验 证 码:
第二种方式:使用jQuery中的ajax实现以上效果。首先form表单以及Action中的都不变,我们只需改变script就可以了。
第一步:引入js文件
第二步://ajax异步请求用户名是否存在
$(function(){
$('#username').change(function(){//给username添加一个change事件
var val = $(this).val();//获取输入框的值
val = $.trim(val);//去空
if(val != ""){//判断值是否为空
var url = "${pageContext.request.contextPath}/user_findByName.action";//url还是那个URL
var args ={"time":new Date().getTime(),"username":val};//这里和上面不同的是,这里用json方式实现传入的time和username参数
$.post(url,args,function(data){//发送post请求,后台返回的数据在data里面,
$('#span').html(data);//把后台返回的数据放入span中
});
}
});
})
然后我们来看一下后台数据上会怎么返回的。由于我这是使用ssh框架实现的,为了方便,所以我只展示在Action中是怎么返回数据的,关于ssh框架中service层,dao层的实现请自行解决。public class UserAction extends ActionSupport implements ModelDriven {
private static final long serialVersionUID = 1L;
/**
* 模型驱动
*/
private User user = new User();
@Override
public User getModel() {
return user;
}
// 注入UserService
private UserService userService;
public void setUserService(UserService userService) {
this.userService = userService;
}/**
* AJAX进行异步校验用户名的执行方法
*
* @throws IOException
*/
public String findByName() throws IOException {
User existUser = userService.findByName(user.getUsername());//调用service层的方法返回数据库中查询出来的对象
// 获得response对象,向页面输出:
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");//设置编码格式
// 判断返回的对象是否为空
if (existUser != null) {
// 如果有,查询到该用户:用户名已经存在
response.getWriter().println("用户名已经存在");
} else {
// 如果没有,用户名可以使用
response.getWriter().println("用户名可以使用");
}
return NONE;//此处返回空
}
效果如下:
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
用ajax进行部门的验证,ajax用$.post方式进行用户名校验相关推荐
- ajax注册表单用户名实时验证,Ajax注册表单用户名实时验证..doc
Ajax注册表单用户名实时验证. Ajax注册表单用户名实时验证 1.1.1 摘要 很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性:从而确保用户之间不拥有相同的用 ...
- ajax+servlet实现注册验证(验证用户名是否存在)
做项目过程中,需要用到 ajax 实时验证注册的用户名是否已经存在.所以写了一个小例子,经过测试直接可用. 主要分为4个文件,分别为 web.xml 文件,login.jsp文件,login.js 以 ...
- ajax用户注册验证视频,jquery+ajax实现注册实时验证实例详解
本文实例讲述了jquery+ajax实现注册实时验证.分享给大家供大家参考,具体如下: 当我们注册一个用户时,会实时提示该用户的信息是否可用,这就是ajax的应用,很久以前就看过这个实现了,今天又看了 ...
- ThinkPHP+JQuery实现ajax无刷新登录验证(详解+相关问题)
ThinkPHP+JQuery实现ajax无刷新登录验证 摘要: 使用原生javascript进行ajax实现无刷新更改页面内容的复杂性尽人皆知,而jquery对ajax传递进行了封装和优化,因此通过 ...
- jquery validation engine ajax验证,jquery.validationEngine 验证 AJAX 不起作用解决方法
当前位置:我的异常网» Ajax » jquery.validationEngine 验证 AJAX 不起作用解决方 jquery.validationEngine 验证 AJAX 不起作用解决方法 ...
- AJAX初识(原生JS版AJAX和Jquery版AJAX)
一.什么是JSON 1.介绍JSON独立于语言,是一种与语言无关的数据格式.JSON指的是JavaScript对象表示法(JavaScript Object Notation)JSON是轻量级的文本数 ...
- ajax json的参数,java ajax json参数
java ajax json参数 [2021-02-02 08:55:23] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(&quo ...
- ajax资料收集-Ajax文章(教程和实例)---Ajax资源下载(源码和教程)---Ajax规范标准
CSDN Blog Ajax文章搜索: http://search.csdn.net/search/ajax/1/blog/ 专题:Ajax技术应用开发 http://www.51cto.com/ht ...
- 《ASP.NET AJAX程序设计 第I卷 服务器端ASP.NET AJAX Extensions与ASP.NET AJAX Control Toolkit》目录(最终定稿)...
第一二卷都比较简单,特别是第一卷,讲的都是服务器端控件.第二卷是客户端部分,第三卷是高级内容,包括调试.性能.部署.控件开发.源代码结构.用户体验.心理学模型等等-- 第一卷争取在四月份出版,谢谢各位 ...
最新文章
- (转)搭建企业内部yum仓库(centos6+centos7+epel源)
- 科普:教你如何看懂 JavaGC 日志
- Worktile完成新一轮融资,将发力研发管理赛道
- Rxjava 实现接口回调的功能
- linux磁盘阵列oravote,Oracle在Linux下集群RAC的安装与启停
- 2引擎帮助文档_Simcenter Amesim 16液压部分帮助文档中英文对照(2)
- python 自定义类(特殊方法)
- Codeforces Round #693 (Div. 3)A~G解题报告
- 算法训练和模型部署如何避免多次重写数据预处理代码
- 【java】java 局部变量表中的槽是可以重用的
- 从数组中删除最后一项
- 阿里巴巴集团 CTO 约你聊聊这些事
- 无法启动此程序 因为计算机中丢失msvcr71.dll,msvcr71.dll丢失怎样修复?计算机中丢失msvcr71.dll的解决方法...
- modelica语言学习记录V1.0
- 小说阅读网站设计HTML,HTML5+CSS3网站设计基础教程
- 用eclipse读spark源码
- Mobileye超详细研报:高逼格ADAS的内在修养
- 大数据技术之Linux
- imo班聊未读消息提示优化
- 央视网商城app_央视网商城“中国好产品联合招商大会”召开
热门文章
- TensorFlow指定CPU和GPU方法
- Cocos Creator 预制的使用模板(一般用于UI)
- HarmonyOS ToastDialog 的使用
- xlrd.biffh.XLRDError:不支持的格式或文件损坏:预期的BOF记录;找到了b’b \ x14#e \ xbc \
- Android CheckedTextView 实现单选与多选
- 微信小程序bindtap 与 catchtap 是使用
- CoordinatorLayout 的jar包位置
- 一篇文章让你读懂Pivotal的GemFire家族产品
- linux syn 队列,linux 防御SYN攻击
- Missing number