如何设置注册页面及提交到数据库并提示注册成功

1、在reg.jsp头文件中引用jquery包以及之后使用ajax判断注册信息的reg.js包

<script src="js/jquery1.11.3.min.js"></script>
<script src="js/reg.js"></script>

2、在reg.jsp的body中建立表单,将数据提交给RegServlet.servlet

<form action="RegServlet" method="post">
<pre>
用户名：<input type="text" name ="userName" /><span id="s1"></span>
密码： <input type="password" name ="userPassword" />
性别： <input type="radio" name ="sex" value="男"/>男
        <input type="radio" name ="sex" value="女"/>女
爱好： <input type="checkbox" name ="hobby" value="吃饭"/>吃饭
        <input type="checkbox" name ="hobby" value="睡觉"/>睡觉
        <input type="checkbox" name ="hobby" value="打豆豆"/>打豆豆
城市： <select name="city">
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="武汉">武汉</option>
        </select>
个人简介：   <textarea rows =""cols = "" name = "info">
            </textarea>
 <input type="submit" name ="sub" value="注册"/>
 </pre>
</form>

3、在reg.js中使用ajax判断用户名是否被使用,当鼠标移出焦点时判断

$(function(){
    $(":text[name='userName']").blur(function(){
        $userName=$(this).val();//获得用户名
        $.ajax({
            type:"get",//如果是post改为post即好
            url:"CheckUnameServlet",
            data:"userName="+$userName,
            success:function(msg){
                if(msg=="1")
                    $("#s1").html("该用户已存在");
                else
                    $("#s1").html("可以注册");
            }
        })
    })
})

4、在CheckUnameServlet.servlet中通过与数据库交互，得到用户名是否存在的结果

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);
        
        String userName = request.getParameter("userName");
        String sql="select * from reg where userName=?";
        List<Object> paramList=new ArrayList<Object>();
        paramList.add(userName);
        DbHelper dbHelper=new DbHelper();
        List<Map<String, Object>> list = dbHelper.executeQuery(sql, paramList);
        if(list!=null && list.size()>0) {
            response.getWriter().print("1");
        }else {
            response.getWriter().print("0");
        }
    }

注：DbHelper是之前写好的一个专门连接数据库的包
5、当提交数据时，使用RegServlet.servlet与数据库进行交互并插入数据

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");

        String userName = request.getParameter("userName");
        String userPassword = request.getParameter("userPassword");
        String sex = request.getParameter("sex");//选中的单选框的内容
        //多选框
        String[] arr = request.getParameterValues("hobby");
        StringBuilder hobbys=new StringBuilder();
        for(String hobby:arr) {
            hobbys.append(hobby+",");
        }
        hobbys.delete(hobbys.length()-1, hobbys.length());
        String city = request.getParameter("city");
        String info = request.getParameter("info");
        
//      response.getWriter().println("用户名:"+userName);
//      response.getWriter().println("密码:"+userPassword);
//      response.getWriter().println("性别"+sex);
//      response.getWriter().println("爱好"+hobbys);
//      response.getWriter().println("城市:"+city);
//      response.getWriter().println("个人简介:"+info);
        
        try {
        Class.forName("com.mysql.jdbc.Driver");
        //2、创建一个对象连接数据库
            Connection conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/数据库名","数据库用户名","数据库密码");
            //3、创建声明对象（语句命令对象）传sql语句到数据库
            Statement statement = conn.createStatement();
            //4、执行sql语句
            String sql = "insert into 数据表名(userName,userPassword,sex,hobbys,city,info) values('"+userName+"','"+userPassword+"','"+sex+"','"+hobbys+"','"+city+"','"+info+"')";
           
            int i = statement.executeUpdate(sql);
            //5、处理结果
            if(i>0)
                response.getWriter().println("注册成功");
            else
                response.getWriter().println("注册失败");
            //6、关闭连接
            statement.close();
            conn.close();
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

6、在数据库中建立数据表信息，其中包括以下字段：
userName,userPassword,sex,hobbys,city,info，
其中userName,sex,hobbys.city,info为varchar类型，userPassword为int类型。