AJAX实现注册

时间:2024-01-05 19:54:26

先添加点击事件:

<input type="button" id="submittt" value="注册"/>

展示提示消息:

<div id="showMsg" style="text-align: center"></div>

提交用户信息,回调函数判断该展示什么消息:

<script>
submittt.onclick=function () {
$.post("/shop/adduser",
{
"username":$("#username").val(),
"password":$("#password").val(),
"telephone":$("#telephone").val(),
"code":$("#code").val()
},function (data) {
if (data.code==333){
$("#showMsg").html("对不起,该用户名已被占用").css("color","red");
}else {
if (confirm("注册成功 是否去登陆")){
window.location.href="/shop/views/login.jsp";
}
}
});
}
</script>

servlet将信息转为JSON格式回传给jsp:

@WebServlet("/adduser")
public class AdduserServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
/*解决中文乱码*/
req.setCharacterEncoding("UTF-8");
/*1.获取请求参数*/
String username = req.getParameter("username");
String password = req.getParameter("password");
String telephone = req.getParameter("telephone");
// System.out.println("-----"+username);
/*唯一性校验,验证用户名是否已经被注册*/
/*2.生成用户对象,传参,封装对象里*/
User user = new User(username,password,telephone);
ILoginDAO dao=new LoginDAOImpl();
boolean exist = dao.isExist(username); resp.setContentType("text/json;charset=UTF-8");
PrintWriter out = resp.getWriter();
Map<Object, Object> map = new HashMap<>();
if(exist){
map.put("code","333");
map.put("error","该用户名已被占用");
//如果已经注册,提示用户该用户名已被占用
// req.setAttribute("error","该用户名已被占用");
}else {
/*3.如果未注册,调用dao,将封装有参数的对象添加到数据库*/
dao.add(user);
/*4.返回信息(注册成功)*/
map.put("code","444");
map.put("success","注册成功");
}
/*5.转换成JSON格式回传给jsp*/
String s = JSON.toJSONString(map);
out.write(s);
out.close();
}
}