添加功能（Ajax版）

客官°小女子只卖身不卖艺 2022-01-14 10:45 205阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

# 添加页面 #

与之前的逻辑一样。

@RequestMapping("/emp")
    public String save(Model model) {
    	List<Dept> depts = deptService.getAll();
    	model.addAttribute("depts", depts);
    	return "save";
    }

添加页面的变化：

![1240][]

# 添加功能 #

点击【保存】通过Ajax请求完成添加操作。

//添加按钮事件
    $("#save").click(function () {
            $("#msg").text("");
            $.ajax({
        	url: "${ctx}/emp",
        	data: $("form").serialize(), //取得表单所有参数
        	type: "post",
        	success: function (result) {
        	    //100表示处理成功
        	    if (result.code == 100) {
        		alert(result.msg);
        		window.opener.location.reload();//刷新父窗口
        		window.close();//关闭当前窗口
        	    }
        	    //200表示处理失败
        	    else if (result.code == 200) {
        	    //显示表单的校验信息
            	$.each(result.data.errors, function (index, item) {
            	    $("#errors").text(item.defaultMessage);
            		});
        
                    //显示姓名唯一性的校验信息
            		if(result.data.checkNameError!=null){
            		    $("#errors").text(result.data.checkNameError);
            		}
        	    }
        	}
        });
    });

@ResponseBody
    @RequestMapping(value = "/emp", method = RequestMethod.POST)
    public Msg save(@Valid Emp emp, BindingResult result) {
    	if (result.hasErrors()) {
    	    List<FieldError> errors = result.getFieldErrors();
    	    return Msg.fail().add("errors", errors);
    	} else {
    	    boolean flag = checkName(emp.getName());
    	    if(!flag){
        		String msg = "姓名已被使用，请更换！-后台提示";
        		return Msg.fail().add("checkNameError", msg);
    	    }else{
        		empService.save(emp);
        		return Msg.success();
    	    }
    	}
    }

![1240 1][]

![1240 2][]

![1240 3][]

# 校验唯一性 #

//校验姓名唯一性
    $("#name").change(function () {
            $.ajax({
        	url: "${ctx}/checkName",
        	data: "name=" + $(this).val(),
        	type: "get",
        	success: function (result) {
        	    if (!result) {
        		$("#msg").text("姓名已被使用，请更换！");
        	    } else {
        		$("#msg").text("");
        	    }
        	}
        });
    });

@ResponseBody
    @RequestMapping("/checkName")
    public boolean checkName(String name) {
    	return empService.checkName(name);
    }

![1240 4][]

转载于:https://my.oschina.net/mondayer/blog/3037955

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/197b502c2a1c4da4b4f1ea97e709b933.png
[1240]: /images/20220114/6aa65437d8364ec49f89ba1f6ad35aa2.png
[1240 1]: /images/20220114/61c0509503dd4c9b91e664937da82f29.png
[1240 2]: /images/20220114/00fe8d78c4f544f5b5260b5fe277f0ad.png
[1240 3]: /images/20220114/fad4950d8f0248b58327b521942e52c9.png
[1240 4]: /images/20220114/dce3768b754f49ea954f65673c55fc5b.png