添加功能（Ajax版）

2019独角兽企业重金招聘Python工程师标准>>>

添加页面

与之前的逻辑一样。

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

添加页面的变化：

添加功能

点击【保存】通过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();
	    }
	}
}

校验唯一性

//校验姓名唯一性
$("#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);
}

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