ajax jquery ssh实现数据异步方式验证

前端之家收集整理的这篇文章主要介绍了ajax jquery ssh实现数据异步方式验证前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

实现输入框输入结束后自动提交到后台进行异步验证数据库中是否已经存在。
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>

猜你在找的Ajax相关文章