SpringMVC注册功能的ajax实现作业 作业要求: 提交到Controller的请求是/user/register 如果输入的账户名是158 9999 8888,则提示手机号已经被使用不能注册;《要求使用ajax做校验》 其他三项为必选项,输入即可,点击注册按钮后,在success.jsp显示注册手机号和密码信息. 第一步:注册页面的构建:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<form method="post" action="user/reg">
<input type="text" name="mobile" placeholder="手机号" id="mobile"><span id="info"></span><br>
<input type="password" name="password" placeholder="密码" id="password"><br>
<input type="submit" value="注册" id="btnReg" disabled="disabled"/>
</form>
<script>
$(function (){
//手机号校验:单独实现;利用到了焦点即开事件
$("#mobile").blur(function (){
$.ajax({
url:'user/checkMobileIsExist',
type:'post',
data:'{"mobile":"'+$("#mobile").val()+'"}',
contentType:'application/json;charset=utf-8',
success:function (resdata) { //服务器返回来的数据
console.log(resdata);
if(resdata=="no"){
$("#info").html("<font color='red'>已经注册了,请换换手机号</font>");
$('#btnReg').prop("disabled",true);
}
else {
$("#info").html("<font color='green'>√</font>");
$('#btnReg').prop("disabled",false);
}
}
}); //end.ajax
});//end.blur
});
</script>
</body>
</html>
第二步: 控制器的实现:
import com.fasterxml.jackson.databind.ObjectMapper;
import com.yh.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.io.IOException;
/**
* @author by 张晨光
* @date 2024/1/19 9:07
*/
@Controller
@RequestMapping("user")
public class RegController {
@RequestMapping("checkMobileIsExist")
@ResponseBody
public String checkMobileIsExist(@RequestBody String mobile) throws IOException {
//System.out.println(mobile);
ObjectMapper mapper=new ObjectMapper();
User user = mapper.readValue(mobile, User.class);
//System.out.println(user);
//这里没有链接数据库:所以,模拟操作;如果有数据的操作,dao.isExists(mobile)
if(user.getMobile()!=null&&!user.getMobile().equals("")){
if(user.getMobile().equals("15899996666"))
return "no";
}
return "ok";
}
@RequestMapping("reg")
public String regUser(User user, Model model){
model.addAttribute("user",user);
return "success";
}
}
作业解析: 1.主要难点在于文本框的焦点事件+ajax的实现; 2.函数回调之后第二次判断,进一步的响应机制,实现提示信息的功能; 3.注册同之前Controller的实现