实现输入框输入结束后自动提交到后台进行异步验证数据库中是否已经存在。
jsp页面关键代码:
<div@H_403_6@ id@H_403_6@="document"@H_403_6@ class@H_403_6@= "page-content"@H_403_6@ >
<form class@H_403_6@= "form-horizontal"@H_403_6@ role ="form"@H_403_6@ novalidate="novalidate"@H_403_6@ >
<div@H_403_6@ class@H_403_6@= "form-group"@H_403_6@>
<label class@H_403_6@= "col-sm-3 control-label no-padding-right"@H_403_6@ for@H_403_6@= "shipversion"@H_403_6@>
型号 </label>
<div@H_403_6@ class@H_403_6@= "col-lg-6"@H_403_6@>
<input type= "text"@H_403_6@ id@H_403_6@ ="shipversion"@H_403_6@
class@H_403_6@="col-lg-6 col-sm-5"@H_403_6@ />
<span id@H_403_6@= "checkResult"@H_403_6@></span >
</div@H_403_6@>
</div@H_403_6@>
……
jquery关键代码:
< script src= './js/jquery-2.0.3.min.js'@H_403_6@ ></ script> //一定需要添加jquery@H_403_6@
< script type= "text/javascript"@H_403_6@>
$(document).ready(function@H_403_6@()@H_403_6@ {@H_403_6@
$("#checkResult"@H_403_6@).html(""@H_403_6@ );
$("#shipversion"@H_403_6@).blur(function@H_403_6@ ()@H_403_6@ {@H_403_6@
$.ajax({
url:' <%=path %>/versionExistAction '@H_403_6@,type : 'POST'@H_403_6@,data : {shipversion:$( "#shipversion"@H_403_6@).val()},success : function@H_403_6@(data)@H_403_6@ {@H_403_6@
if@H_403_6@(data.versionIsUsed==true@H_403_6@){
$( "#checkResult"@H_403_6@).html("<font color='red'>该型号已经存在,请重新输入! </font>"@H_403_6@ );
} else@H_403_6@{
$( "#checkResult"@H_403_6@).html("<font color='green'>该型号尚不存在,可以添加! </font>"@H_403_6@ );
}
},error : function@H_403_6@()@H_403_6@ {@H_403_6@
alert( '发生错误'@H_403_6@);
}
});
});
});
action中关键代码:
public@H_403_6@ void@H_403_6@ existVersion@H_403_6@(){
if@H_403_6@(shipversion !=""@H_403_6@ ){
Warship ship=warshipService.queryWarshipByShipversion(shipversion );
if@H_403_6@(ship==null@H_403_6@ ){
versionIsUsed=false@H_403_6@ ;
} else@H_403_6@{
versionIsUsed=true@H_403_6@ ;
}
}
}
struts中配置文件:
<package name@H_403_6@= "addWeapon"@H_403_6@ extends ="json-default"@H_403_6@ namespace="/"@H_403_6@ >
<action name@H_403_6@= "versionExistAction"@H_403_6@ class@H_403_6@ ="warshipAction"@H_403_6@ method="existVersion"@H_403_6@ >
<result@H_403_6@ type= "json"@H_403_6@ ></ result@H_403_6@>
</action>
</package>