H5W3
当前位置:H5W3 > 其他技术问题 > 正文

简单的ajax+servlet表单数据验证

一、用户注册的JSP页面<%@ page contentType="text/html;charset=UTF-8" language="java" %><head> <META http-equiv=Content-Type content="text/html; charset=UTF-8"></head><script language="javascript">

 var XMLHttpReq;
  //创建XMLHttpRequest对象       
    function createXMLHttpRequest() {
  if(window.XMLHttpRequest) { //Mozilla 浏览器
   XMLHttpReq = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) { // IE浏览器
   try {
    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
   }
  }
 }
 //发送请求函数
 function sendRequest(url) {
  createXMLHttpRequest();
  XMLHttpReq.open("GET", url, true);
  XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
  XMLHttpReq.send(null);  // 发送请求
 }
 // 处理返回信息函数
    function processResponse() {
     if (XMLHttpReq.readyState == 4) { // 判断对象状态
         if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
             var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;
                window.alert(res);                
            } else { //页面不正常
                window.alert("您所请求的页面有异常。");
            }
        }
    }
 // 注册函数
    function signUp() {
  var uname = document.myform.uname.value;
  var psw = document.myform.psw.value;
  var psw2 = document.myform.psw2.value;
  if(uname=="") {
   window.alert("用户名不能为空。");
   document.myform.uname.focus();
   return false;
  }
  else if(psw!=psw2) {
   window.alert("两次输入密码不同。");
   document.myform.psw.focus();
   return false;
  }
  else {
   sendRequest('signUp?uname='+ uname + '&psw=' + psw);
  }
 }
</script>

<body vLink="#006666" link="#003366" bgColor="#E0F0F8">  <img height="33" src="enter.gif" width="148">  <form action="" method="post" name="myform">    用户名: <input size="15" name="uname"><p>    密  码: <input type="password" size="15" name="psw"><p>    重输密码: <input type="password" size="20" name="psw2"><p>    <input type="button" value="注册" onclick="signUp()" >  </form>

</body>运行图:

 

二、处理AJAX请求的servlet

package classmate;import java.io.IOException;import java.io.PrintWriter;import java.sql.ResultSet;import java.sql.SQLException;import javax.servlet.ServletConfig;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class SignUpAction extends HttpServlet {   public void init(ServletConfig config) throws ServletException {  }    /*     *  处理<GET> 请求方法.     */    protected void doGet(HttpServletRequest request, HttpServletResponse response)    throws ServletException, IOException {     //设置接收信息的字符集     request.setCharacterEncoding("UTF-8");     //接收浏览器端提交的信息  String uname = request.getParameter("uname");  String psw = request.getParameter("psw");    //设置输出信息的格式及字符集                response.setContentType("text/xml; charset=UTF-8");        response.setHeader("Cache-Control", "no-cache");        //创建输出流对象        PrintWriter out = response.getWriter();        //依据验证结果输出不同的数据信息        out.println("<response>");                  //数据库操作        DB db = new DB();  ResultSet rs;  int insRes = 0;        String strSql=null;        //判断用户名是否重复        strSql = "select * from classuser where username=’"   + uname + "’";  rs = db.executeQuery(strSql);  boolean bnoRepeat = false;  try {   if ( !rs.next()) {    bnoRepeat = true;   }  } catch (SQLException e) {   e.printStackTrace();  }        //用户名不重复,插入记录  if (bnoRepeat){            strSql = "Insert Into classuser values(‘"+ uname + "’,’" + psw + "’)";   insRes = db. executeUpdate(strSql);        }        if(!bnoRepeat){   out.println("<res>" + "注册失败!用户名已存在,重新输入用户名" + "</res>");  }else if(insRes>0){   out.println("<res>" + "注册成功!" + "</res>");  }else{   out.println("<res>" + "注册失败!" + "</res>");  }    out.println("</response>");  out.close();    }}

三、数据库操作类:

package classmate;import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet;import java.sql.SQLException;import java.sql.Statement;public class DB { Connection connect = null; ResultSet rs = null; public DB() {  try {   Class.forName("org.gjt.mm.mysql.Driver");  //设置驱动程序类型    }  catch(java.lang.ClassNotFoundException e) {   e.printStackTrace();  } } //执行查询语句的方法 public ResultSet executeQuery(String sql) {  try {//建立与数据库服务器的连接     onnect = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/test1", "root", "");<br>     tatement stmt = connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);   rs = stmt.executeQuery(sql);//执行指定的数据查询语句  }   catch(SQLException ex) {    ex.printStackTrace();  }  return rs; }    //执行增、删改语句的方法 public int executeUpdate(String sql) {  int result = 0;  try {   connect = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/test1", "root", "");    Statement stmt = connect.createStatement();   result = stmt.executeUpdate(sql);//执行指定的数据操作语句  }   catch(SQLException ex) {    System.err.println(ex.getMessage());    }  return result; } //关闭数据库连接的方法 public void close(){  if(connect!=null){   try{    connect.close();    connect = null;    }catch(SQLException ex) {     System.err.println(ex.getMessage());   }  }  } }

四、web.xml文件中配置servlet

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<servlet><servlet-name>ms1</servlet-name><servlet-class>classmate.SignUpAction</servlet-class></servlet>

<servlet-mapping><servlet-name>ms1</servlet-name><url-pattern>/signUp</url-pattern></servlet-mapping>

<!– The Welcome File List –><welcome-file-list><welcome-file>signUp.jsp</welcome-file></welcome-file-list></web-app> 

本文地址:H5W3 » 简单的ajax+servlet表单数据验证

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址