Extjs 和 SpringMVC 结合后，Extjs的Ajax回调函数无响应

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

    这个是本菜鸟自己遇到在难题，用了半天才解决，所以来分享一下。
    目的是实现SpringMVC 和 ExtJs 能够通过Ajax 结合起来，也就是在Ext页面实现动态刷新。

     主要是用来解决Ext的Ajax回调函数无响应的情况
 

     本次举的例子是动态验证用户名是否重复
 

    

1.额外需要的Jar包

    mysoa-0.9.4.jar

    slf4j-api-1.6.3.jar

2.ExtJS页面 JSP 编写

<%@   page   language =   "java"   contentType   = "text/html; charset=UTF-8"       pageEncoding = "UTF-8"   %> <! DOCTYPE   html   PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd"   > < html > < head >                < meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >                < title >   Insert title here </ title   >                < link   href = "../css/body.css"   type = "text/css"   rel = "stylesheet"   />                < link   href = "../js/ext-4.1.0-beta-3/resources/css/ext-all.css"   type = "text/css"   rel = "stylesheet"   />                < script   src = "../js/ext-4.1.0-beta-3/ext-all.js"   type = "text/javascript"   ></ script >                < script   src = "../js/jquery/jquery-1.7.2.min.js"   type = "text/javascript"   ></ script >                             < script   type = "text/javascript"   >                      var   uname = Ext.create( 'Ext.form.TextField'   ,{                         id :   'userName' ,                         fieldLabel :   '*用户名' ,                         name :   'userName' ,                         labelStyle :   "font-size:15px;padding: 10px;"   ,                         labelAlign :   'right' ,                         allowBlank :   false ,                         blankText :   '用户名不能为空'   ,                            //vtype : 'checkUser',                       listeners : {                               blur : valiUserName                         },                                            });                                   var   pwd = Ext.create( 'Ext.form.TextField'   ,{                         id :   'userPwd' ,                         inputType :   'password' ,                         name :   'userPwd' ,                         fieldLabel :   '*密 码' ,                         labelStyle :   "font-size:15px;padding: 10px;"   ,                         labelAlign :   'right' ,                         allowBlank :   false ,                         blankText :   '密码不能为空'   ,                         listeners : {                               blur : valiUserPwd                         },                                            });                                         var   confirmPwd = Ext.create( 'Ext.form.TextField'   ,{                         id :   'confirmPwd' ,                         inputType :   'password' ,                         fieldLabel :   '*确认密码' ,                         labelStyle :   "font-size:15px;padding: 10px;"   ,                         labelAlign :   'right' ,                         allowBlank :   false ,                         blankText :   '确认密码不能为空'   ,                         vtype :   'password' ,                         initialPassField :   'userPwd' ,                         listeners : {                       specialKey :   function (field,e){                             if   (e.getKey() == Ext.EventObject.ENTER) register();                       },blur : valiPwdAndConfirmPwd                     }                   });                                         var   panelMain = Ext.create( 'Ext.form.Panel'   ,{                         id :   'registerForm' ,                         frame :   true ,                         border :   false ,                         waitMsgTarget:   true ,                         bodyStyle :   'background:#afb4db;padding:20px 70px 50px;' ,                         buttonAlign :   'center' ,                         items : [uname,pwd,confirmPwd],                         buttons : [{                               text :   '立即注册' ,                               disabled:   true ,                           formBind:   true ,                               handler : register                         }]                   });                                         var   win = Ext.create( 'Ext.window.Window'   ,{                         title :   '欢迎使用注册页面'   ,                         width : 450,                         height : 302,                         layout :   'fit' ,                         border :   false ,                         maxmizable :   false ,                         resizable :　   false ,                         draggable :   false ,                         closable :   false ,                         items : panelMain                   });                                      Ext.onReady(   function (){                                                     //自定义的vtype                         Ext.apply(Ext.form.field.VTypes, {                                password:   function (val, field) {                                       if   (field.initialPassField) {                                           var   pwd = field.up( 'form' ).down( '#'   + field.initialPassField);                                           return   (val == pwd.getValue());                                     }                                       return   true   ;                                 },                                     passwordText:   '两次输入的密码不一致'   ,                                                           checkUser :   function (val) {                                        if   ( null   !=val &&   "" !=val) {                                           jQuery.ajax({                                                          type:   "POST" ,                                                          dataType: "json"   ,                                                          url:   "register.do?action=check&userName="   +val,                                                          success:   function (msg){                                                                 return   false ;                                                          }                                                 });                                     }                                        return   true   ;                                                                   },                              checkUserText :   '用户名已存在'                                                        });                         Ext.QuickTips.init();                         Ext.form.Field.prototype.msgTarget =   'under' ;                                                  win.show();                   });                                   //注册                      function   register() {                            /* panelMain.getForm().submit({                               clientValidation : true,                               url : 'register.do?action=register',                               method : 'post'                         }); */                            var   userName = uname.getValue();                            var   userPwd = pwd.getValue();                            if   (panelMain.getForm().isValid()) {                               jQuery.ajax({                                        type:   "POST" ,                                        dataType:   "json" ,                                        url:   "register.do?action=register&userName="   +userName+  "&userPwd=" +userPwd,                                        success:   function (msg){                                                if (msg.success){                                                    Ext.Msg.alert( "Message"   ,msg.description);                                                    window.location.href = " <%= request.getContextPath() %>   /index.jsp ";                                              }                                        }                               });                         }                                            }                                         //动态验证用户名是否存在                      function   valiUserName() {                            var   userName = uname.getValue();                      if (userName !=   null   && userName !=   "" ){                         jQuery.ajax({                                  type:   "POST" ,                                  dataType:   "json" ,                                  url:   "register.do?action=check&userName="   +userName,                                  success:   function (msg){                                          if (msg.success){                                              Ext.Msg.alert( "Message"   , "用户名已存在，请重新填写"   );                                              uname.focus( true   );                                        }                                  }                               });                   }                   }                                         //验证密码                      function   valiUserPwd() {                   }                                         //验证确认密码                      function   valiPwdAndConfirmPwd() {                   }                                   </ script > </ head > < body >        </ body > </ html >

3.SpringMVC陪置页面

<? xml   version = "1.0"   encoding =   "UTF-8" ?> < beans   xmlns = "http://www.springframework.org/schema/beans"          xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"   xmlns:p = "http://www.springframework.org/schema/p"          xmlns:context = "http://www.springframework.org/schema/context"          xsi:schemaLocation = "http://www.springframework.org/schema/beans       http://www.springframework.org/schema/beans/spring-beans-2.5.xsd      http://www.springframework.org/schema/context       http://www.springframework.org/schema/context/spring-context-2.5.xsd" >          <!-- Initializing Spring FrameworkServlet ' annomvc'时实例化bean，并自动依赖注入 -->          <!-- 规约这里只扫描controller -->          < context:component-scan   base-package = "com.kedacom.login.common.user.controller"   />          <!-- 启动Spring MVC的注解功能，完成请求和注解POJO的映射 -->          < bean   class = "org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"   />          <!-- 对模型视图名称的解析，即在模型视图名称添加前后缀 -->          < bean   class = "org.springframework.web.servlet.view.InternalResourceViewResolver"   p:prefix =   "/"   p:suffix   = ".jsp"   />        </ beans >

4.Java注册页面

package   com.kedacom.login.common.user.controller; import   javax.annotation.Resource; import   javax.servlet.http.HttpServletResponse; import   org.mysoa.core.model.Message; import   org.mysoa.core.web.DirectlyRenderUtils; import   org.springframework.stereotype.Controller; import   org.springframework.web.bind.annotation.RequestMapping; import   com.kedacom.login.user.entity.User; import   com.kedacom.login.user.manager.RegisterManager; @Controller @RequestMapping ( "/user/register.do"   ) public   class   LoginRegisterController {                 @Resource (name =   "registerManager"   )          private   RegisterManager   registerManager   ;                 private   final   String   URL_REGISTER   =   "/login/register"   ;                 /**        * 直接进入注册界面        *   @return        */          @RequestMapping (params= "action=initRegister"   )          public   String initRegister(){                return   URL_REGISTER   ;       }                 /**        * 用户注册        *   @param   request        *   @param   response        */          @RequestMapping (params= "action=register"   )          public   void   registerUser(HttpServletResponse response,String userName,String userPwd) {              Message msg =   new   Message();             User user =   new   User();             user.setUserName(userName);             user.setUserPwd(userPwd);                boolean   isSuccess =   registerManager   .registerUser(user);                             if   (isSuccess) {                   msg.setSuccess(   true );                   msg.setDescription(   "注册成功"   );             }   else   {                   msg.setSuccess(   false );                   msg.setDescription(   "注册失败"   );             }             DirectlyRenderUtils. renderJson(response, msg);       }                 /**        * 验证用户名是否重复        *   @param   response        *   @param   userName        */          @RequestMapping (params= "action=check"   )          public   void   checkUser(HttpServletResponse response,String userName) {              Message msg =   new   Message();             msg.setSuccess(   false );                boolean   isExist =   registerManager   .checkUserByName(userName );                if   (isExist) {                      //如果用户名存在                   msg.setSuccess(   true );                   msg.setDescription(   "用户名已经存在"   );             }             DirectlyRenderUtils. renderJson(response, msg);       }        }

结束。。。

转载于:https://my.oschina.net/qingpingmiyun/blog/54855