java ajax即时校验数据库是否存在相同的分类
再做项目时,客户需要我实现一个功能,大概是在添加分类时,如果数据库有相同的分类,jsp界面要出现提示信息,并且不能添加成功。效果图如下:
下面说下实现的思路:
1.首先在jsp页面的输入框实现一个onblur事件,在失去焦点的时候立刻进行检验,具体如下
<div class="control-group"> <label class="control-label">1、内部标识符:</label> <div class="controls"> <form:input path="nbbsf" htmlEscape="false" maxlength="100" class="input-xlarge required" onblur="checkIsExist(this.value,'nbbsf');" style="border-color: red;"/> <span class="help-inline"><font color="red">*</font> </span> <span>例如:DE00001</span> <span id="nbbsfShowResult"></span> </div> </div> <div class="control-group"> <label class="control-label">2、中文名称:</label> <div class="controls"> <form:input path="zwmc" htmlEscape="false" maxlength="100" class="input-xlarge required" style="border-color: red;"/> <span class="help-inline"><font color="red">*</font> </span> <span>例如:公民身份号码</span> </div> </div>
2.写一个ajax提交数据方法
function checkIsExist(value,type) { type = $.trim(type); value = $.trim(value); if(value==""){ if(type=="nbbsf"){ $("#nbbsfShowResult").html(""); }else if(type=="bsf"){ $("#bsfShowResult").html(""); } return; } $.ajax({ type:"POST", //http请求方式 url:"${ctx}/dataelement/dataElement/IsExist", //发送给服务器的url data:"value="+value+"&type="+type, //发送给服务器的参数 dataType:"json", //告诉JQUERY返回的数据格式(注意此处数据格式一定要与提交的controller返回的数据格式一致,不然不会调用回调函数complete) complete : function(msg) { var result = eval("(" + msg.responseText + ")"); if(type=="bsf"){ if(result.success) { $("#bsfShowResult").html(result.message); } else { $("#bsfShowResult").html(result.message); } }else if(type=="nbbsf"){ if(result.success) { $("#nbbsfShowResult").html(result.message); } else { $("#nbbsfShowResult").html(result.message); } } } }); }
3.开始写后台的方法
@ResponseBody @RequestMapping(value = "IsExist", produces = "application/json") public ResultDTO IsExist(Model model, String value, String type) { ResultDTO result = new ResultDTO(); DataElement dataElement = new DataElement(); if (type.equals("bsf")) { dataElement.setBsf(value); } else if (type.equals("nbbsf")) { dataElement.setNbbsf(value); } List<DataElement> list = dataElementService.findCheck(dataElement); result.setSuccess(list.size() > 0 ? false : true); if (type.equals("bsf")) { result.setMessage(list.size() > 0 ? "<font color='red'>标识符已存在</font>" : ""); } else if (type.equals("nbbsf")) { result.setMessage(list.size() > 0 ? "<font color='red'>内部标识符已存在</font>" : ""); } return result; }
其中 ResultDTO是用于返回前台接收的参数
public class ResultDTO implements Serializable{ /** * */ private static final long serialVersionUID = 1443394184664485821L; private boolean success; private String message; public boolean isSuccess() { return success; } public void setSuccess(boolean success) { this.success = success; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } }
最后就是将你写入的分类名作为参数传入的sql中,去看List.size是否大于0,如果大于0即是存在重名的,就返回<font color='red'>标识符已存在</font>。