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类型。