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中建立表單,將數(shù)據(jù)提交給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中通過與數(shù)據(jù)庫交互驻仅，得到用戶名是否存在的結(jié)果

    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是之前寫好的一個專門連接數(shù)據(jù)庫的包
5挽牢、當提交數(shù)據(jù)時与学，使用RegServlet.servlet與數(shù)據(jù)庫進行交互并插入數(shù)據(jù)

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");//選中的單選框的內(nèi)容
        //多選框
        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彤悔、創(chuàng)建一個對象連接數(shù)據(jù)庫
            Connection conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/數(shù)據(jù)庫名","數(shù)據(jù)庫用戶名","數(shù)據(jù)庫密碼");
            //3、創(chuàng)建聲明對象（語句命令對象）傳sql語句到數(shù)據(jù)庫
            Statement statement = conn.createStatement();
            //4索守、執(zhí)行sql語句
            String sql = "insert into 數(shù)據(jù)表名(userName,userPassword,sex,hobbys,city,info) values('"+userName+"','"+userPassword+"','"+sex+"','"+hobbys+"','"+city+"','"+info+"')";
           
            int i = statement.executeUpdate(sql);
            //5晕窑、處理結(jié)果
            if(i>0)
                response.getWriter().println("注冊成功");
            else
                response.getWriter().println("注冊失敗");
            //6、關(guān)閉連接
            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卵佛、在數(shù)據(jù)庫中建立數(shù)據(jù)表信息杨赤，其中包括以下字段：
userName,userPassword,sex,hobbys,city,info，
其中userName,sex,hobbys.city,info為varchar類型截汪，userPassword為int類型疾牲。