java ajax即时校验数据库是否存在相同的分类

最新推荐文章于 2021-09-26 10:53:50 发布

dijinmu6306

最新推荐文章于 2021-09-26 10:53:50 发布

阅读量150

点赞数

文章标签：数据库 java json

原文链接：http://www.cnblogs.com/fei-yao/p/7977723.html

版权

再做项目时，客户需要我实现一个功能，大概是在添加分类时，如果数据库有相同的分类，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"  οnblur="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;
    }
    
    

}