最近看了个教程是关于jQueryAPI+Ajax技术实现的用户名校验的交互例子,适合新手入门,贴出来大家分享

ajax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/checkuser.js"></script>
<title>ajax验证体验例子</title>
</head>
<body>
<h1>ajax验证体验例子</h1><br/>
请输入要验证的用户名:<input type="text" id="username"/> <span id="result"></span>
<br/>
<input type="button" value="验证" onclick="checkname()"/>
</body>
</html>

checkuser.js
function checkname() {
var jqueryObj = $("#username");//取得封装后的对象
var username = jqueryObj.val() ;//获得输入的用户名
$.get("ClassicServer?name=" + username, null, putdata);//提交的数据,设置回调函数putdata
}
function putdata(data) {//回调函数
var myspan = $("#result");//将返回数据反映到页面
myspan.html(data);
}

ClassicServer.java
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
public class ClassicServer extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
response.setContentType("text/html;charset=GB2312");
PrintWriter out = response.getWriter();
//获取浏览器穿过来的要校验的值
String old = request.getParameter("name");
//检验传过来的数据是否有问题
if (old == null || old.length() == 0) {
out.println("用户名不能为空");
} else {
String name = new String(old.getBytes("ISO8859-1"));
//检验处理
if (name.equals("gongjichaofan")) {
//返回用户感兴趣的数据
out.println("抱歉【" + name + "】已经存在,请选择其他名字");
} else {
out.println("恭喜【" + name + "】可以注册");
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}

web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<servlet>
<servlet-name>ClassicServer</servlet-name>
<servlet-class>ClassicServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ClassicServer</servlet-name>
<url-pattern>/ClassicServer</url-pattern>
</servlet-mapping>
</web-app>
好了,代码发完了,大家可以自己部署一下服务器,我用的是Tomcat5.X。
要是哪个新手不会部署,大家可以共同交流一下,QQ联系我吧:358842456