SpringMVC注册功能的ajax实现作业

张哥编程

发布于 2024-12-13 19:10:51

1710

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的实现

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-01-19，如有侵权请联系 cloudcommunity@tencent.com 删除

mobile