ajax实现表单用户名校验

步骤如下：

1.新建一个html页面，此处是ajax.html

2.新建一个servlet做后台处理

3.新建一个js页面，verify.js

<html>
<head>
<title>用户校验ajax</title>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/verify.js"></script>
</head>
<body>

用户校验的ajax实例，请输入用户名：<br/>


<input type="text" id="userName"/>
<input type="button" value="校验" onclick="verify()"/>


<div id="result"></div>

</body>
</html>

说明：

这里面引入了jquery库文件，使用jquery可以省去大量的js代码，同时引入自定义的js文件verify.js。ajax方式下不需要使用表单进行数据提交，因此可以省去form，当然也可以写上去。ajax方式不需要name属性，但需要一个id属性，便于在js代码中通过id获得属性的值。在按钮处添加验证函数，取得验证信息。最后需要一个提示标签用于存放服务器返回的信息。此处用了<div>当然也可用用<span>标签，两者的区别是前者具有换行功能，后者不具备。前者常用语显示一句话，后者常用语显示一段话。

servlet代码：

public class AjaxServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws servletexception,IOException {
try {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();

//1.取得页面参数信息
String old = request.getParameter("name");
//2.检查参数是否有问题
if (old == null || old.length() == 0) {
out.println("用户名不能为空");
} else {
//3.校验操作
String name = old;
if (name.equals("zqc")) {
//4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面，

//而不是跳转到一个新页面MDC模式
out.println("用户名[" + name + "]已经存在,请使用其他用户名");
} else {
out.println("用户名[" + name + "]尚未存在,可以使用该用户名");
}
}

} catch (Exception e) {
e.printstacktrace();
}

}

@Override
protected void doPost(HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse) throws servletexception,IOException {
doGet(httpServletRequest,httpServletResponse);
}
}

说明：

后台部分注意4点即可：代码中已注明。1.取得页面参数信息。2.检查产生是否有效。3.校验参数。4.显示信息。当然还需要处理页面编码问题，要不会出现乱码。

verify.js代码：

function verify(){
//首先测试一下页面的按钮按下，可以调用这个方法
//使用js的alert方法，显示一个弹出提示
//alert("按钮被点击了！！！");

//1.获取文本框中的内容
//document.getElementByIdx_x("userName"); dom的方式获得id
//jquery的方式获得页面节点，参数中#加上id属性值可以找到一个节点
//jquery的方法返回的都是jquery的对象，可以继续在上面只写其他的jquery对象
var jqueryObj = $("#userName") ;
//获得节点的值
var userName = jqueryObj.val();

//验证userName是否取到了
// alert(userName);
//2.将文本框中的数据发送给服务器端的servlet
//使用jquery的XMLHTTPrequest对象请求的封装
$.get("AjaxServlet?name=" + userName,null,callback);

}

//回调函数
function callback(data){
// alert("服务器端的数据回来了！");
//3.接收服务器端返回的数据
//alert(data);
//4.将服务器返回的数据动态显示到页面上
//找到保存结果信息的节点
var resultObj = $("#result");
//动态改变页面中div节点中的内容
resultObj.html(data);
说明：

此部分主要是4点：1.获取文本框中内容。2.将文本框中的数据发送给服务器端的servlet。3.接收服务器端返回的数据。4.将服务器返回的数据动态显示到页面上。这里使用了jquery的一些代码。可以到jquery的官网下载相关api和库文件。jquery官网：www.jquery.com

ajax实现表单用户名校验

相关推荐