Spring boot项目用Ajax异步请求验证手机号的唯一性

										**效果如下**

在这里插入图片描述
代码如下:

Entity层

根据自己数据库的字段进行填写,本章不在介绍

DAO层

在这里插入图片描述

@Query(value="select * from book  where name like CONCAT('%',:name,'%')",nativeQuery=true)
	   List<Book> findByName(@Param("name") String name);
	
	//查询phone 验证唯一性
	List<Book> findByPhone(@Param("phone") String phone);

Service

在这里插入图片描述

public Page<List<Map>> findAll(Pageable page){
		return bookDAO.findAllMap(page);
	}

Controller层

在这里插入图片描述

//通过查询号码,验证号码的唯一性方法
	@RequestMapping(value="findByPhone")
	@ResponseBody
	public String findByPhone(HttpServletRequest request) {
		String phone=request.getParameter("phone");
		if(bookService.findByPhone(phone).size()>0) {
			return "1";
		}else {
			return "2";
		}
	}

Html界面:
在这里插入图片描述
js代码:
在这里插入图片描述

<script>
    	$("#phone").blur(function(){	//失焦事件
    		var phone=$("#phone").val();	//获取输入的电话号
    		$.post("findByPhone",{phone:phone},function(data){
    			if(data==1){
    				$("#err").html("<font color='red'>*您好,您的手机号已被注册</font>");
    				$("#submit").attr("disabled",true);
    				//如果验证已被注册,这个按钮就会被禁止提交
    			}else{
    				$("#err").html("<font color='green'>您好,手机号可以注册</font>");
    				$("#submit").attr("disabled",false);
    			}
    		})
    	})
    </script>
发布了23 篇原创文章 · 获赞 28 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_45736927/article/details/102670770