java ajax登录界面代码_Java Web 利用Ajax，servlet实现简单的用户注册验证功能

1、新建jsp页面Register.jsp，添加如下页面代码：

用户名	type = 'text' name = 'username' id = 'username' onblur = '' />	id = 'usernamediv' name = 'usernamediv'>
密码	type = 'password' name = 'password' id = 'password' />
邮箱	type = 'text' name = 'mailbox' id = 'mailbox' />
姓名	type = 'text' name = 'name' id = 'name' />
	type = 'button' value = '注册' onclick = 'checkusername();' /> type = 'reset' value = '重置' />

2、编写ajax代码，在jsp页面的

中增加脚本代码：

3、编写servlet类，新建RegisterCheckServlet，重写doGet()和doPost()方法，在doPost()中添加如下代码：

protected void doPost(HttpServletRequest

request, HttpServletResponse response)

throws

ServletException, IOException {

//设置向前台ajax传中文乱码的问题

response.setContentType("text/xml;charset=UTF-8");

response.setHeader("Cache-Control",

"no-cache");

response.setCharacterEncoding("UTF-8");

ResultSet rs = null;

String sql = null;

Exesql exesql = new

Exesql();

PrintWriter out =

response.getWriter();

//接收传入servlet的参数

String flag =

(String)request.getParameter("flag");

if

(flag.equals("uname")){

//1.如果传入的是校验用户名，从数据库表中取出值进行是否重复判断

try {

String

username = (String)request.getParameter("username");

//处理接收中文

username=new

String(username.getBytes("iso-8859-1"),"utf-8");

sql

= "select 1 from userlist where username = '"+username+"'";

rs

= exesql.querysql(sql);

if

(rs.next()){

System.out.println("用户名校验：已存在用户名");

out.print("重复");

}else{

System.out.println("用户名校验：OK!");

out.print("OK");

}

} catch

(SQLException e) {

//

TODO Auto-generated catch block

e.printStackTrace();

}

}else if

(flag.equals("mailbox")) {

//2.如果传入的是邮箱，查询是否有重复的邮箱

String

mailbox = request.getParameter("mailbox");

sql = "select

1 from userlist where mailbox = '"+mailbox+"'";

}else if (flag.equals(""))

{

}

}

在doGet()中添加：

protected void doGet(HttpServletRequest

request, HttpServletResponse response)

throws

ServletException, IOException {

this.doPost(request,

response);

}

4、配置servlet的xml文件：

RegiterCheckServlet

RegiterCheckServlet

com.login.RegisterCheckServlet

RegiterCheckServlet

/RegiterCheckServlet

5、用到的其他类如下：

(1)Conn类：

public class Conn {

//取得与数据库之间的连接

public Connection connorcl() {

String url = null;

String username = null,password

= null;

Connection conn = null;

try{

Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();

url =

"jdbc:oracle:thin:@10.117.192.132:1521:orcl";

System.out.println("开始建立连接....");

username =

"book";

password =

"book";

System.out.println("开始建立连接..");

conn =

DriverManager.getConnection(url, username, password);

if (conn !=

null){

System.out.println("连接成功");

}

}catch(Exception e)

{

System.out.println(e.getMessage());

}

return conn;

}

}

(2)Exesql类：

public class Exesql {

//执行查询sql

public ResultSet querysql(String sql){

//定义变量

Conn conn = new Conn();

Statement stmt = null;

ResultSet rs =null;

//执行sql

try {

//与数据库建立连接

Connection

connection = conn.connorcl();

stmt =

connection.createStatement();

rs =

stmt.executeQuery(sql);

} catch (SQLException e)

{

// TODO

Auto-generated catch block

e.printStackTrace();

}

return rs;

}

//执行插入、更新sql

public int insertsql(String sql){

//定义变量

Conn conn = null;

Statement stmt = null;

int rs = 0;

//与数据库建立连接

Connection connection =

conn.connorcl();

//执行sql

try {

stmt =

connection.createStatement();

rs =

stmt.executeUpdate(sql);

} catch (SQLException e)

{

// TODO

Auto-generated catch block

e.printStackTrace();

}

return rs;

}

}

笔记：在编写过程中，关于中文字符乱码的问题困扰了许久，最终采用了在servlet接收端进行字符转换的方法得到解决。Ajax异步调用真的挺有意思，需要好好学习。同时学习了如何用firefox浏览器debug页面中js脚本。本次ajax调用方法是点注册进行调用，其实也可以在文本框失去焦点是触发ajax，进行调用。