ajax如何实现用户名校验的传统和jquery的$.post方式

这篇文章主要介绍了ajax如何实现用户名校验的传统和jquery的$.post方式，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联主要从事网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务临城,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

第一种：传统的ajax异步请求，后台代码以及效果在最下边

首先我们在eclipse中创建一个注册页面regist.jsp,创建一个form表单，注意，由于我们只是实现用户名校验的效果，下边红色部门是我们需要研究对象，所以其他的部门可以忽略不看。

内容如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
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();
}







会员注册

小米商城

//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中 }); } }); })

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;//此处返回空 }

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

感谢你能够认真阅读完这篇文章，希望小编分享的“ajax如何实现用户名校验的传统和jquery的$.post方式”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

http://bjjierui.cn/article/ijcgep.html