springboot - AJAX技术 确定编号唯一性实例

AJAX是一种B/S之间的通信技术

确定编号唯一性实例
1.在html页面中为 编号 绑定失焦事件(ajaxSn()),并且写出function ajaxSn()

这一步的效果是在输入框输入完数字后,若光标离开输入框后,f12后台会打印出所输入的数字

2.在controller控制层编写ajaxSn方法
控制层完整代码

 @RequestMapping("/GoodsPurchase/ajaxSn")
    @ResponseBody //用于接收html页面的数据
    public String ajaxSn(String sn){
        System.out.println("sn = " + sn);
        List<GoodsPurchase> goodsPurchaseList = goodsPurchaseService.queryBySn(sn);
        System.out.println("goodsPurchaseList = " + goodsPurchaseList);
        if (goodsPurchaseList != null && goodsPurchaseList.size()>0) {
            return "no" ;
        }else{
            return "yes" ;
        }

$.post(url,data,function (resp)方法让页面获得的数据传到控制层

模型层,xml的sql语句的编写

设定接收控制层返回值的resp,接收控制层对数据进行判断后的返回值

这一步后控制台可以接受并打印出页面所获得的数据

3.可视化返回结果
添加一个输出框

若返回的resp为yes,则输出绿色可用,否则输出红色不可用

效果如下


4.设定flag ,设定onsubmit事件,用于阻止重复编号注入

5.修改 html层直接复制add-html的就可以,其他层共用,不用改,唯一注意的点如下
下图代码作用 修改时不动也可以提交