现在的位置: 首页 > 综合 > 正文

ajax实现注册页面动态验证用户名是否已注册,不必提交即可验证。

2013年10月01日 ⁄ 综合 ⁄ 共 3036字 ⁄ 字号 评论关闭

今天学了一下ajax,感觉很爽啊。ajax真是很强大、

我首先就把我之前一直没解决的问题:如何在前台动态验证用户名是否已注册,而不必提交刷新之后再验证,上代码:

首先,jsp页面:

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
  <body>
   <input type="text" name="text1" id="text1id"  onblur="Ajaxtest1();"><br>
   <input type="text" name="text2" id="text2id" /><br>
<%--      <input type="button" value="button" onclick="Ajaxtest1();"><br>--%>
   <div id="div1"></div>
  </body>
</html>

这个其实只是两个文本框,输入用、

下面是js代码。验证用的、

<script type="text/javascript">
	var xmlhttprequest=null;
		function Ajaxtest1(){
		if(window.ActiveXObject){//IE浏览器
				xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
			}
		else if(window.XMLHttpRequest){
				xmlhttprequest=new XMLHttpRequest();
			}
		if(null!=xmlhttprequest){
			var text1=document.getElementById("text1id").value;
			var text2=document.getElementById("text2id").value;
				xmlhttprequest.open("GET", "testajax1?t1="+text1+"&t2="+text2, true);
				xmlhttprequest.onreadystatechange=ajaxcallback;
				//var tt=document.getElementById("text1").innerHTML;
				xmlhttprequest.send(null);
			}
	}
		function ajaxcallback(){
				if(xmlhttprequest.readyState==4){
			if(xmlhttprequest.status==200){
					var text=xmlhttprequest.responseText;
					document.getElementById("div1").innerHTML=text;
				}
					}
			}
	</script>

这个没什么可说的,唯一注意的一点就是xmlhttprequest.open("GET", "testajax1?t1="+text1+"&t2="+text2, true);

这里面的testajax1是servlet,注意这个地址需和web.xml保持一致。

接下来是testajax1.java

package com.guang.ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.guang.sqlhelp.sqlhelp;
import java.sql.*;
public class testajax1 extends HttpServlet {
	public testajax1() {
		super();
	}
	int i=0;
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("gbk");
		response.setContentType("text/html;charset=gbk");
		PrintWriter out = response.getWriter();
		//System.out.println("doGet"+i);
		i++;
		String t1=request.getParameter("t1");
		//System.out.println(t1);
		//out.println("Hello World");
		sqlhelp sp=new sqlhelp();
		Connection conn=sp.getconn();
		Statement sta=sp.getsta2(conn);
		String sql="select * from baseinfo where usernum='"+t1+"'";
		ResultSet set=sp.getset(sta, sql);
		int j=0;
		if(set!=null){
		try {
			set.last();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		try {
			j=set.getRow();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		if(j==1){
			out.println("此学号已被注册,请换一个!!");
		}
		else{
			out.println("恭喜您,这个可以注册!");
		}
		out.close();
	}
		}

}

那个。上面的也很简单,就是一个取数据的过程,唯一的一个就是验证行数。这个也可以其他的方法。

sqlhelp在这里我就不贴出来了。

抱歉!评论已关闭.